Quelques règles d'optimisation pour les pages Web du navigateur
Optimisation des pages Compression des ressources statiquesUtilisez des outils de construction (webpack, gulp) pour compresser de manière appropriée les ressources statiques des pages Web telles que les images, les scripts et les styles.
Images de sprite CSS, images en ligne base64Fusionnez les petites icônes du site en une seule image, utilisez CSS pour positionner et intercepter les icônes correspondantes, utilisez les images en ligne de manière appropriée.
Styles en haut et scripts en basLa page est un processus de rendu étape par étape. Coller le style en haut peut présenter la page à l'utilisateur plus rapidement ; coller la balise <script> en haut bloquera le téléchargement des ressources derrière la page.
Utiliser les CSS et js des liens externesPlusieurs pages font référence à des ressources statiques publiques et la réutilisation des ressources réduit les requêtes http supplémentaires.
Évitez les images avec un src videÉvitez les requêtes http inutiles.
<!-- Les images avec un src vide lanceront toujours des requêtes http--><img src= style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px ; débordement : caché ; clair : les deux ; famille de polices : tahoma, arial, Microsoft YaHei ; "><!-- La taille réelle de l'image est de 600 x 300, qui est mise à l'échelle à 200 x 100 en HTML --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; contour : aucun ; hauteur de ligne : 25,2 px ; taille de police : 14 px ; débordement : caché ; clair : les deux ; famille de polices : tahoma, arial, Microsoft YaHei ; "><!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Document</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>Dans l'exemple, les fichiers CSS et JS sont préchargés et seront appelés immédiatement une fois utilisés dans les rendus de pages ultérieurs.
Vous pouvez spécifier le type de pour charger différents types de ressources.
- style
- scénario
- vidéo
- audio
- image
- fonte
- document
- ...
Cette méthode peut également précharger des ressources sur plusieurs domaines en définissant l'attribut crossorigin.
<link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>CSS sélecteurLa priorité des sélecteurs de haut en bas est :
- Sélecteur d'identifiant
- sélecteur de classe
- sélecteur de balises
- sélecteur adjacent
h1 + p{ marge-haut : 15px ;Sélectionne le paragraphe qui apparaît immédiatement après l'élément h1. Les éléments h1 et p ont un élément parent commun.
sélecteur d'enfant
h1 > fort {couleur : rouge ;}sélecteur de descendants
h1 em {couleur: rouge;}sélecteur de caractères génériques
sélecteur d'attribut
*[title] {color:red;}img[alt] {border: 5px rouge uni;}Sélecteur de pseudo-classe
Expérience d'utilisation du sélecteur :
Réduire le niveau des sélecteurs
- Donner la priorité aux sélecteurs de classes, qui peuvent remplacer les sélecteurs d'étiquettes multicouches ;
- Utilisez le sélecteur d'ID avec prudence Bien qu'il soit efficace, il est unique dans la page et n'est pas propice à la collaboration et à la maintenance en équipe ;
- Faire un usage raisonnable de l'héritage du sélecteur ;
- Évitez les expressions CSS.
En fonction de la priorité du sélecteur précédent, vous devez essayer d'éviter plusieurs niveaux d'imbrication du sélecteur, de préférence pas plus de 3 niveaux.
.container .text .logo{ couleur : rouge }/*Changer en*/.container .text-logo{ couleur : rouge }Rationalisez les fichiers de style de page et supprimez les styles inutilisésLe navigateur effectuera une correspondance de style redondante, ce qui affectera le temps de rendu. De plus, les fichiers de style trop volumineux affecteront également la vitesse de chargement.
Utiliser l'héritage CSS pour réduire la taille du codeEn utilisant les propriétés héritables de CSS, l'élément parent définit le style et les éléments enfants n'ont pas besoin de le redéfinir.
Les attributs héritables courants incluent : la couleur, la taille de la police, la famille de polices, etc. ; les attributs non héritables incluent : la position, l'affichage, le flotteur, etc.
Lorsque la valeur de l'attribut est 0, aucune unité n'est ajoutée.Lorsque la valeur de l'attribut CSS est 0, aucune unité ne peut être ajoutée pour réduire la quantité de code.
.text{ largeur : 0px; hauteur : 0px; }/*Changer en*/.text{ largeur : 0;JavascriptUtiliser la délégation d'événements
Utilisez la délégation d'événements pour lier des événements à plusieurs éléments DOM similaires.
<ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul>// Manière déraisonnable : lier l'événement de clic à chaque élément $('#container .list').on('click', function() { var text = $(this).text(); console. log(text); });//Méthode de délégation d'événements : utilisez le mécanisme de diffusion d'événements pour déléguer des événements à l'élément parent $('#container').on('click', '.list', function() { var text = $(this ).texte(); console.log(texte });Il convient de noter que bien que l'événement puisse être délégué au document lors de l'utilisation de la délégation d'événement, cela n'est pas raisonnable. L'une est que cela provoque facilement une erreur d'appréciation de l'événement, et l'autre est que l'efficacité de la recherche de chaîne de portée est faible. L'élément parent le plus proche doit être sélectionné comme délégué.
En plus de meilleures performances, l'utilisation de la délégation d'événements élimine également le besoin de lier des événements à des éléments DOM créés dynamiquement.
DOMContentLoadedVous pouvez commencer le traitement de l'arborescence DOM après le chargement des éléments DOM (DOMContentLoaded), au lieu d'attendre que toutes les ressources d'image soient téléchargées.
// Javascript natif document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM entièrement chargé et analysé);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// Version simplifiée de $(document).ready()$(function() { console.log(ready!);});Préchargement et chargement différé préchargerUtilisez le temps d'inactivité du navigateur pour précharger les ressources qui pourraient être utilisées à l'avenir, telles que les images, les styles et les scripts.
Préchargement inconditionnelUne fois le chargement déclenché, les ressources qui seront nécessaires dans le futur sont immédiatement obtenues.
Les ressources d'images sont préchargées. (3 façons d'implémenter le préchargement d'image).
Préchargement basé sur le comportement de l'utilisateurÉvaluez les opérations possibles du comportement des utilisateurs et préchargez les ressources qui pourraient être nécessaires à l'avenir.
Chargement paresseux
- Lorsque l'utilisateur tape dans la zone de saisie de recherche, les ressources pouvant être utilisées sur la page de résultats de recherche sont préchargées ;
- Lorsque l'utilisateur actionne un onglet, l'un d'eux sera affiché par défaut. En cliquant sur d'autres options, les ressources qui seront utilisées dans le futur pourront être chargées en premier au survol de la souris ;
À l'exception du contenu ou des composants requis pour l'initialisation de la page, tout le reste peut être chargé paresseusement, comme les bibliothèques js qui coupent les images, les images qui ne sont pas dans la plage visible, etc.
Les images sont chargées paresseusement. (Déterminez si l'image se trouve dans la zone visible, si c'est le cas, attribuez le chemin réel à l'image)
Évitez la recherche globaleToute variable non locale utilisée plus d'une fois dans une fonction doit être stockée en tant que variable locale.
function updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg); msg.innerHTML = Mise à jour terminée.;}La variable globale document est utilisée plusieurs fois dans la fonction ci-dessus, notamment dans la boucle for. Par conséquent, il est préférable de stocker les variables globales du document en tant que variables locales, puis de les utiliser.
function updateUI(){ var doc = document; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + image + i; } var msg = doc.getElementById(msg); msg.innerHTML = Mise à jour terminée.;}Une chose à noter est que dans le code JavaScript, toute variable non déclarée à l'aide de var deviendra une variable globale et une mauvaise utilisation entraînera des problèmes de performances.
Évitez les requêtes d'attributs inutilesL'utilisation de variables et de tableaux est plus efficace que l'accès aux propriétés d'un objet, car l'objet doit rechercher dans la chaîne de prototypes une propriété portant ce nom.
//Utiliser le tableau var valeurs = [5, 10];var sum = valeurs[0] + valeurs[1];alert(sum);//Utiliser l'objet var valeurs = { premier : 5, deuxième : 10 };var somme = valeurs.premier + valeurs.second;alerte(somme);Dans le code ci-dessus, les propriétés des objets sont utilisées pour calculer. Rechercher des propriétés une ou deux fois n'entraînera pas de problèmes de performances, mais si plusieurs recherches sont nécessaires, par exemple dans une boucle, les performances seront affectées.
Lorsque vous recherchez plusieurs attributs pour obtenir une valeur unique, par exemple :
var query = window.location.href.substring(window.location.href.indexOf(?));Les recherches d'attributs inutiles doivent être réduites et window.location.href doit être mis en cache en tant que variable.
var url = window.location.href;var query = url.substring(url.indexOf(?));limitation des fonctionsSupposons qu'il existe un champ de recherche, liez l'événement onkeyup au champ de recherche, afin qu'une requête soit envoyée à chaque fois que la souris est levée. L'utilisation de fonctions de limitation peut garantir que plusieurs opérations consécutives effectuées par l'utilisateur dans un délai de saisie spécifié ne déclenchent qu'une seule demande.
<input type=text id=input value= />// Lier l'événement document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// Fonction logique function search() { console.log('search. . .');}// Fonction d'accélérateur function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }, 300);}Les scénarios d'application de la fonction de limitation ne se limitent pas au champ de recherche. Par exemple, lors du défilement de la page, du redimensionnement de la fenêtre étirée, etc., la fonction de limitation doit être utilisée pour améliorer les performances.
Réduire le nombre de déclarationsLe nombre d'instructions est également un facteur qui affecte la vitesse d'exécution des opérations.
Combiner plusieurs déclarations de variables en une seule déclaration de variable
// Utiliser plusieurs déclarations var var count = 5; var color = blue; var valeurs = [1,2,3]; var now = new Date(); , valeurs = [1,2,3], maintenant = new Date();Une version améliorée consiste à utiliser une seule déclaration var, séparée par des virgules. Lorsqu'il y a plusieurs variables, utiliser une seule déclaration var est beaucoup plus rapide que de déclarer des variables individuelles séparément.
Utiliser des tableaux et des littéraux d'objetUtilisez des littéraux de tableau et d'objet au lieu d'une affectation instruction par instruction.
var valeurs = new Array();values[0] = 123;values[1] = 456;values[2] = 789;//Après amélioration, var valeurs = [123, 456, 789];var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//Après amélioration var person = { nom : Jack, âge : 28, sayName : function(){ alert(this.name }};Optimisation des chaînes Concaténation de chaînesLes premiers navigateurs n'optimisaient pas la manière de concaténer les chaînes avec le signe plus. Puisque les chaînes sont immuables, cela signifie que des chaînes intermédiaires sont utilisées pour stocker les résultats, donc la création et la destruction fréquentes de chaînes sont la raison de son inefficacité.
var text = Bonjour;text+= ;text+= Monde!;Ajoutez la chaîne au tableau, puis appelez la méthode join du tableau pour la convertir en chaîne, évitant ainsi l'utilisation de l'opérateur d'addition.
var arr = [], i = 0;arr[i++] = Bonjour;arr[i++] = ;arr[i++] = Monde!;var text = arr.join('');Les navigateurs modernes ont optimisé la concaténation des chaînes et des signes, donc dans la plupart des cas, l'opérateur d'addition reste le premier choix.
Réduire les refusions et les redessinsDans le processus de rendu du navigateur, la redistribution et le redessin sont impliqués, ce qui est un processus qui consomme des performances. Vous devez faire attention à réduire les actions qui déclenchent la redistribution et le redessin pendant les opérations de script.
Quelles opérations déclenchent une redistribution ou un redessinage ?
- Redistribution : les propriétés géométriques de l'élément ont changé et l'arbre de rendu doit être reconstruit. Le processus de modification de l'arborescence de rendu est appelé redistribution ;
- Redessiner : La taille géométrique de l'élément n'a pas changé, mais le style CSS (couleur ou couleur de fond) d'un élément a changé.
Comment réduire la redistribution, redessiner et améliorer les performances des pages Web ?
- Redimensionner la fenêtre
- Modifier la police
- Ajouter ou supprimer des feuilles de style
- Modifications du contenu, telles que l'utilisateur saisissant du texte dans la zone <input/>
- Manipuler les attributs de classe
- Scripts pour manipuler le DOM (ajouter, supprimer ou modifier des éléments du DOM)
- Calculer les propriétés offsetWidth et offsetHeight
- Définir la valeur de l'attribut de style
1. Manipulation de script des éléments DOM
- Définissez l'élément DOM sur display:none. Une redistribution sera déclenchée pendant le processus de paramétrage, mais vous pourrez le modifier à volonté plus tard et l'afficher après modification ;
- Clonez l'élément en mémoire avant de l'utiliser et remplacez-le à nouveau après modification.
2. Modifier le style de l'élément
- Essayez de faire des modifications par lots au lieu de les modifier une par une ;
- Définissez l'identifiant et la classe à l'avance, puis définissez le nom de classe de l'élément.
3. Lors de l'ajout d'une animation à un élément, définissez le style CSS de l'élément sur position:fixed ou position:absolute. L'élément ne provoquera pas de redistribution après avoir quitté le flux de documents.
4. Utilisez la fonction de limitation (déjà mentionnée ci-dessus) lors du réglage de la taille de la fenêtre, de la saisie dans la zone de saisie, du défilement de la page, etc.
HTTP cache du navigateurLa configuration correcte du cache du navigateur est l’un des moyens importants d’optimisation des pages Web.
Expire et contrôle du cacheExpires provient de HTTP1.0 et Cache-Control provient de HTTP1.1. Lorsque les deux sont définis en même temps, Cache-Control remplacera Expires.
ETag et dernière modification
- Expires spécifie la date d'expiration réelle plutôt que le nombre de secondes. Mais Expires présente certains problèmes, tels que l'heure du serveur désynchronisée ou inexacte. Il est donc préférable d'exprimer le délai d'expiration en secondes restantes plutôt qu'en temps absolu.
- Cache-Control peut définir la valeur d'âge maximum en secondes et spécifier le délai d'expiration du cache. Par exemple : Cache-Control : max-age=3600.
ETag et Last-Modified sont renvoyés par le serveur dans les en-têtes de réponse. ETag a une priorité plus élevée que Last-Modified, ce qui signifie que le serveur donnera la priorité à la valeur de ETag.
Mise en cache forte et mise en cache négociée
- ETag est toute balise attachée au document, qui peut être le numéro de série ou le numéro de version du document, ou la vérification du contenu du document, etc. Lorsque le document change, la valeur ETag change également. If-None-Match est lié à ETag. Lorsque le navigateur lance une requête, il portera la valeur ETag dans le champ If-None-Match et l'enverra au serveur ;
- Last-Modified est l'heure à laquelle le document a été modifié pour la dernière fois côté serveur. If-Modified-Since est lié à Last-Modified. Lorsque le navigateur lance une requête, il portera la valeur de Last-Modified dans le champ If-Modified-Since et l'enverra au serveur.
Les types de cache sont le cache fort et le cache négocié. La différence entre les deux est que le cache fort n'enverra pas de requête au serveur, mais le cache négocié enverra une requête si la correspondance réussit, il renverra 304 Non modifié, si la correspondance échoue, il renverra. 200 ; le navigateur vérifiera d’abord le cache fort, et si le cache fort manque, effectuera alors une vérification du cache de négociation.
Comment configurer le cache du navigateurPourquoi réduire les requêtes HTTP
- Ajoutez Expires et Cache-Control à la réponse de retour du serveur Web ;
- Configurez Expires et Cache-Control dans le fichier de configuration nginx ou apache.
Les mesures visant à réduire les requêtes http jouent un rôle important dans l'optimisation des performances, telles que : utiliser des images de sprite CSS pour remplacer plusieurs requêtes d'images, éviter les images src vides, utiliser des images en ligne, utiliser des liens externes CSS et js, mettre en cache, etc.
Le processus depuis la saisie de l'URL jusqu'à la fin du chargement de la page comprend :
- Résolution DNS
- Connexion TCP
- Requête et réponse HTTP
- Le navigateur affiche la page
- connexion étroite
Une requête http complète doit passer par ces processus, ce qui prend du temps et des ressources, il devient donc nécessaire de réduire le nombre de requêtes.
Références :
"Guide avancé sur la construction de sites Web hautes performances et la construction de sites Web hautes performances"
"Meilleures pratiques pour accélérer votre site Web"
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.