Meilleures pratiques pour la vitesse de chargement des pages Web : optimisation de la redistribution, du redessinage et de la redistribution

Améliorer la vitesse de chargement des pages Web : bonnes pratiques pour la redistribution, le redessinage et la redistribution, des exemples de code spécifiques sont nécessaires

Avec le développement rapide d'Internet, la vitesse de chargement des pages Web est devenue un élément crucial de l'expérience utilisateur. Personne ne veut attendre de longs temps de chargement, alors comment améliorer la vitesse de chargement des pages Web est devenu une question très critique.

La vitesse de chargement des pages Web est affectée par de nombreux facteurs, parmi lesquels la redistribution, le redessinage et la redistribution sont les trois principaux goulots d'étranglement des performances. Cet article présentera quelques bonnes pratiques pour vous aider à optimiser la vitesse de chargement de vos pages Web et fournira des exemples de code spécifiques.

1. Optimiser la structure HTML et CSS

La structure HTML et CSS d'une page Web est la base des performances de chargement des pages Web. Considérez les options d'optimisation suivantes :

• Réduisez la taille des fichiers HTML et CSS : supprimez le code, les espaces et les commentaires inutiles, et utilisez des outils de compression pour réduire la taille du fichier.
• Réduire les niveaux d'imbrication : trop de niveaux d'imbrication entraîneront des opérations de redistribution et de redessinage répétées du navigateur, alors essayez de garder la structure du HTML et du CSS aussi plate que possible.
• Utilisez des fichiers CSS externes : placez les styles CSS dans des fichiers externes pour éviter l'intégration et la duplication des styles.

2. Évitez de déclencher la redistribution et le redessinage

La redistribution et le redessinage sont deux facteurs importants qui affectent les performances des pages Web. Ils sont généralement déclenchés en raison de modifications des éléments DOM, qui se produisent souvent lors de l'interaction de l'utilisateur ou des effets d'animation. Voici quelques moyens d'éviter de déclencher la redistribution et le repaint :

• Utilisez la classe au lieu de l'attribut style : définissez le style en tant que classe CSS au lieu d'écrire le style directement dans l'élément HTML via l'attribut style. Cela entraîne moins de modifications du style, réduisant ainsi l’apparition de redessins et de redistributions.
• Évitez les opérations DOM fréquentes : réduisez les opérations fréquentes d'ajout, de suppression et de modification sur les éléments DOM et essayez d'effectuer plusieurs tâches en une seule opération.
• Utilisez des fragments de document ou du DOM hors ligne : stockez temporairement les éléments DOM qui nécessitent des opérations fréquentes dans des fragments de document ou du DOM hors ligne, puis ajoutez-les à la page une fois l'opération terminée pour réduire le nombre de redistributions et de redessins.
• Utilisez des animations CSS au lieu des animations JavaScript : les animations CSS peuvent utiliser directement l'accélération matérielle du navigateur et sont plus efficaces que les animations implémentées à l'aide de JavaScript.

Voici un exemple de code pour éviter les manipulations fréquentes du DOM :

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const fragment = document.createDocumentFragment();

  for (let i = 0; i < 1000; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = 'List item ' + i;
    fragment.appendChild(listItem);
  }

  container.appendChild(fragment);
</script>

3. Préchargement et chargement paresseux du contenu

Le préchargement et le chargement paresseux sont des moyens efficaces pour optimiser la vitesse de chargement des pages Web. L'utilisation du préchargement peut charger les ressources qui peuvent être nécessaires à l'avance avant le rendu de la page, tandis que le chargement paresseux peut charger un contenu spécifique lorsqu'une certaine condition est remplie.

Ce qui suit est un exemple de code pour le préchargement et le chargement paresseux des images :

<img src="/static/imghw/default1.png"  data-src="loading.gif"  class="lazy" data- alt="Image">

<script>
  const img = document.querySelector('img');
  const src = img.getAttribute('data-src');

  const image = new Image();
  image.onload = function() {
    img.setAttribute('src', src);
  };
  image.src = src;
</script>

Dans le code ci-dessus, l'image préchargée est d'abord affichée sous forme d'animation de chargement, puis une fois la ressource image chargée, elle est remplacée par l'image réelle. .

4. Fusionner et compresser les fichiers de ressources

Fusionner et compresser les fichiers de ressources pour réduire le nombre de requêtes réseau et la taille des fichiers. Combinez plusieurs fichiers CSS ou JavaScript en un seul fichier et utilisez des outils de compression pour réduire la taille du fichier. Cela réduit le nombre d'allers-retours entre le serveur et le navigateur et réduit le temps de transfert de fichiers.

5. Utiliser le cache du navigateur

Définissez une politique de cache sur le serveur afin que la page soit récupérée du cache lors des chargements ultérieurs au lieu de renvoyer la demande. En définissant les informations d'en-tête de cache appropriées, le navigateur peut mettre en cache les ressources statiques pendant un certain temps, réduisant ainsi la charge sur le serveur et améliorant la vitesse de chargement des pages.

Ce qui suit est un exemple de code pour configurer la mise en cache sur le serveur Apache :

<IfModule mod_expires.c>
  ExpiresActive on
  
  ExpiresDefault "access plus 2 weeks"
  
  <FilesMatch ".(png|jpg|jpeg|gif|ico|css|js)$">
    ExpiresDefault "access plus 1 month"
  </FilesMatch>
</IfModule>

Cet article présente plusieurs bonnes pratiques pour améliorer la vitesse de chargement des pages Web, notamment l'optimisation de la structure HTML et CSS, en évitant de déclencher la redistribution et le redessinage, le préchargement et la paresse du chargement. contenu, fusionner et compresser des fichiers de ressources, utiliser la mise en cache du navigateur, et bien plus encore. J'espère que ces technologies pourront vous aider à améliorer la vitesse de chargement des pages Web et à offrir une meilleure expérience utilisateur.

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!