Comparaison de consommation de performances : laquelle consomme le plus de ressources, redistribue ou redessine ?-tutoriel HTML-php.cn

Comparaison de consommation de performances : laquelle consomme le plus de ressources, redistribue ou redessine ?

WBOY

Libérer： 2024-01-26 09:31:05

original

1138 Les gens l'ont consulté

Comparaison de consommation de performances : laquelle consomme le plus de ressources, redistribue ou redessine ?

Reflow vs redraw : Lequel consomme le plus de performances ?

Dans le développement front-end, l'optimisation des performances est un enjeu important. L'un des goulots d'étranglement en termes de performances concerne les opérations de redistribution et de repeinture du navigateur. Dans cet article, nous explorerons les définitions de redistribution et de redessinage et comparerons leurs pénalités de performances avec des exemples de code concrets.

Reflow fait référence au processus par lequel le navigateur recalcule la position et les propriétés géométriques des éléments de la page. Lorsque la mise en page change ou que les attributs de style changent, le navigateur doit recalculer la position et la taille de l'élément. Ce processus est appelé redistribution. La redistribution entraînera la reconstruction complète de l'arborescence de rendu, ce qui consomme beaucoup de performances.

Le redessin fait référence au processus par lequel le navigateur redessine les éléments en fonction des derniers calculs de style sans affecter la mise en page. Le redessinage n'entraîne pas de modifications de la mise en page, il affecte uniquement le style de l'élément. Cependant, le processus de redessinage nécessite toujours de parcourir et de redessiner les éléments, il y aura donc également une certaine perte de performances.

Pour mieux comprendre la différence de performances entre reflow et redraw, nous allons le tester avec l'exemple de code suivant. Supposons que nous ayons une page contenant 1000 éléments div, chaque div a un style avec le nom de classe « box ».

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <!-- 1000个div -->
  </div>

  <script>
    // 创建1000个div元素
    for (let i = 0; i < 1000; i++) {
      const div = document.createElement('div');
      div.classList.add('box');
      document.getElementById('container').appendChild(div);
    }

    // 添加一个scroll事件监听器
    window.addEventListener('scroll', function() {
      // 修改样式属性
      document.getElementById('container').style.backgroundColor = 'blue';
    });
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé 1000 éléments div avec la classe "box" et ajouté un écouteur d'événement de défilement. Au fur et à mesure que la page défile, nous modifierons la couleur de fond du conteneur contenant ces éléments div.

Observons la perte de performances de la redistribution et du redessinage via les outils de développement du navigateur.

Tout d'abord, nous cliquons sur la barre de défilement dans la page pour faire défiler. À chaque événement de défilement, le navigateur doit effectuer une opération de redistribution pour recalculer la position et la disposition des éléments. Grâce à l'outil de rendu du navigateur, nous pouvons voir combien de temps prend l'opération de redistribution.

Ensuite, nous continuons à cliquer sur la barre de défilement pour faire défiler, et effectuons uniquement des opérations de redessinage pour le moment. Grâce à l'outil de rendu du navigateur, nous pouvons voir combien de temps prend l'opération de redessinage.

Après les tests, nous pouvons conclure que l'opération de refusion est plus gourmande en performances que l'opération de redessinage. Parce que l'opération de redistribution nécessite de recalculer la position et la disposition de l'élément, tandis que l'opération de redessinage nécessite uniquement de redessiner le style de l'élément.

Dans le processus de développement actuel, nous devrions essayer d'éviter les opérations de redistribution fréquentes car cela entraînerait une dégradation des performances. Une méthode d'optimisation consiste à utiliser l'attribut transform de CSS pour remplacer le changement d'attribut de style, ce qui peut réduire la fréquence de redistribution.

Pour résumer, redistribuer et redessiner sont deux concepts importants dans le processus de rendu du navigateur. La redistribution nécessite plus de performances que le redessinage, car la redistribution nécessite de recalculer la position et la disposition des éléments. Dans le développement réel, nous devrions essayer de réduire la fréquence des redistributions pour améliorer les performances des pages.

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!