Page d'accueil>Tutoriel de conception de sites Web>Tutoriel HTML

Une brève discussion sur les règles de base d'optimisation des performances des pages Web

Auteur：Eve Cole Date de mise à jour：2025-03-12 06:32:01

Quelques règles d'optimisation pour les pages Web du navigateur

Optimisation des pages

Compression des ressources statiques

Utilisez 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 base64

Fusionnez 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 bas

La 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 externes

Plusieurs 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. 
  1.  style
  2.  scénario
  3.  vidéo
  4.  audio
  5.  image
  6.  fonte
  7.  document
  8.  ...
 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électeur
 La priorité des sélecteurs de haut en bas est : 
  1.  Sélecteur d'identifiant
  2.  sélecteur de classe
  3.  sélecteur de balises
  4.  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 : 
  1.  Donner la priorité aux sélecteurs de classes, qui peuvent remplacer les sélecteurs d'étiquettes multicouches ;
  2.  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 ;
  3.  Faire un usage raisonnable de l'héritage du sélecteur ;
  4.  Évitez les expressions CSS.
 Réduire le niveau des sélecteurs
 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és
 Le 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 code
 En 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;
 Javascript
 Utiliser 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.
 DOMContentLoaded
 Vous 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écharger
 Utilisez 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 inconditionnel
 Une 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. 
  1.  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 ;
  2.  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 ;
 Chargement paresseux
 À 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 globale
 Toute 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 inutiles
 L'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 fonctions
 Supposons 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éclarations
 Le 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'objet
 Utilisez 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înes
 Les 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 redessins
 Dans 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. 
  1.  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 ;
  2.  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é.
 Quelles opérations déclenchent une redistribution ou un redessinage ? 
  1.  Redimensionner la fenêtre
  2.  Modifier la police
  3.  Ajouter ou supprimer des feuilles de style
  4.  Modifications du contenu, telles que l'utilisateur saisissant du texte dans la zone <input/>
  5.  Manipuler les attributs de classe
  6.  Scripts pour manipuler le DOM (ajouter, supprimer ou modifier des éléments du DOM)
  7.  Calculer les propriétés offsetWidth et offsetHeight
  8.  Définir la valeur de l'attribut de style
 Comment réduire la redistribution, redessiner et améliorer les performances des pages Web ?
 1. Manipulation de script des éléments DOM 
  1.  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 ;
  2.  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 
  1.  Essayez de faire des modifications par lots au lieu de les modifier une par une ;
  2.  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 navigateur
 La configuration correcte du cache du navigateur est l’un des moyens importants d’optimisation des pages Web.
 Expire et contrôle du cache
 Expires 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. 
  1.  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.
  2.  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 dernière modification
 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. 
  1.  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 ;
  2.  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.
 Mise en cache forte et mise en cache négociée
 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 navigateur 
  1.  Ajoutez Expires et Cache-Control à la réponse de retour du serveur Web ;
  2.  Configurez Expires et Cache-Control dans le fichier de configuration nginx ou apache.
 Pourquoi réduire les requêtes HTTP
 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 : 
  1.  Résolution DNS
  2.  Connexion TCP
  3.  Requête et réponse HTTP
  4.  Le navigateur affiche la page
  5.  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.
Articles connexes