Comment optimiser les performances front-end ?

Comment optimiser les performances front-end ?

En termes de contenu

1, réduisez les requêtes HTTP : fusion de fichiers, sprites CSS, image en ligne

2. Réduire les requêtes DNS : le navigateur ne peut télécharger aucun fichier de cet hôte avant que la requête DNS ne soit terminée. Méthodes : mise en cache DNS, répartition des ressources au bon nombre de noms d'hôtes, équilibrage des téléchargements parallèles et des requêtes DNS

3, évitement des redirections : accès intermédiaires redondants

4, Rendre Ajax pouvant être mis en cache

5, Retarder le chargement des composants non essentiels

6, Précharger les composants requis à l'avenir

7. Réduire le nombre d'éléments DOM

8. Placer les ressources dans différents domaines : le navigateur télécharge les ressources d'un domaine en même temps. le nombre est limité. L'augmentation des domaines peut augmenter le nombre de téléchargements parallèles

9, réduire le nombre d'iframes

10 et éviter 404 <.>

Aspect serveur

1, utiliser CDN

2, ajoutez l'en-tête de réponse Expires ou Cache-Control

3, utilisez la compression Gzip pour les composants

4, configurez ETag

5, Flush Buffer Early

6, Ajax utilise GET pour les requêtes

7, éviter img tags avec src vide

Aspect cookie

1, réduisez la taille du cookie

2. Le nom de domaine des ressources importées ne doit pas contenir de cookies

css

1. Placez la feuille de style en haut de la page

2. N'utilisez pas d'expressions CSS

3. Utilisez @import sans l'utiliser

4, n'utilisez pas le filtre d'IE

Aspect Javascript

1, mettre le script en bas de page

2, introduire le javascript et le css de l'extérieur

3, compresser javascript et css

4, supprimer les scripts inutiles

5, réduire le DOM accès

6. Concevoir raisonnablement les auditeurs d'événements

Aspects de l'image

1. Optimiser les images : sélectionnez la profondeur de couleur et la compression en fonction des besoins réels de couleur

2, optimisez les sprites CSS

3, n'étirez pas les images en HTML

4, assurez-vous que favicon.ico est petit et peut être mis en cache

Aspect mobile

1, assurez-vous que les composants font moins de 25 000

2, emballez les composants dans un document en plusieurs parties

C'est ci-dessus ce que j'ai résumé du plan d'optimisation des performances Front-end, si vous avez d'autres bons plans, merci de laisser un message !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!