Redessiner et redistribuer en phase de rendu : lequel a le plus d'impact ?

Redessiner et redistribuer : Lequel affecte la phase de rendu ?

Dans le développement front-end, l'optimisation des performances a toujours été un enjeu important. Parmi eux, la réduction des opérations de repeinture et de redistribution est la clé pour améliorer les performances des pages. Cependant, de nombreux développeurs ne comprennent pas clairement le concept et l'impact du redraw et du reflow. Cet article détaillera les concepts de redraw et de reflow et leur impact sur la phase de rendu, illustrés par des exemples de code concrets.

Tout d’abord, comprenons les concepts de redessiner et de redistribuer. Le redessinage est une opération qui modifie l'apparence d'un élément sans affecter ses propriétés de mise en page. Par exemple, modifiez la couleur d'arrière-plan, la couleur de la police, etc. La redistribution fait référence à la modification des attributs de disposition des éléments, tels que la modification de la taille, de la position, etc. des éléments. Lorsque nous apportons des modifications au DOM, le navigateur effectuera des opérations de redessin et de redistribution pour mettre à jour la page.

Les redessins et redistributions fréquents entraîneront une dégradation des performances. Tout d'abord, le redessin et la redistribution déclencheront la réexécution du pipeline de rendu, ce qui consommera une certaine quantité de ressources informatiques. Deuxièmement, le redessinage et la redistribution entraîneront le redessinage de la page, ce qui peut provoquer un scintillement ou un gel de la page, donnant aux utilisateurs une mauvaise expérience. Par conséquent, la réduction des opérations de redessinage et de redistribution est essentielle pour améliorer les performances des pages et l’expérience utilisateur.

Ensuite, nous utilisons des exemples de code spécifiques pour illustrer l'impact du redessin et de la redistribution sur la phase de rendu. Supposons que nous ayons une liste, chaque élément de liste a un style avec un élément de classe et que nous souhaitons changer la couleur d'arrière-plan de chaque élément de liste :

<ul id="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
  <li class="item">列表项4</li>
</ul>

Tout d'abord, nous utilisons JavaScript pour changer la couleur d'arrière-plan de l'élément de liste :

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.backgroundColor = 'red';
}

Le code ci-dessus amènera le navigateur à effectuer une opération de redessinage. Lors de la modification de la couleur d'arrière-plan de chaque élément de la liste, cela modifiera uniquement les attributs d'apparence de l'élément et n'affectera pas les attributs de mise en page de l'élément.

Ensuite, modifions à nouveau le code et changeons l'opération de changement de couleur d'arrière-plan en changeant la taille de l'élément :

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.width = '100px';
    items[i].style.height = '100px';
}

Ce code déclenchera l'opération de redistribution, car nous changeons la taille de l'élément, ce qui affectera le attributs de mise en page de l'élément.

Comme vous pouvez le voir dans l'exemple de code ci-dessus, les opérations de redessinage et de redistribution ont des effets différents sur la phase de rendu. Le redessinage modifie uniquement les propriétés d'apparence de l'élément, tandis que la redistribution modifie les propriétés de présentation de l'élément. Dans le développement réel, nous devrions essayer d'éviter les opérations fréquentes de redessinage et de redistribution. Nous pouvons réduire la perte de performances grâce aux méthodes d'optimisation suivantes :

1. Utilisez les propriétés CSS telles que la transformation et l'animation pour obtenir des effets d'animation, et elles ne déclencheront pas l'opération de redistribution. , meilleure performance.
2. Réduisez le nombre de redessins et de refusions en modifiant le DOM par lots.
3. Utilisez DocumentFragment pour réduire le nombre d'opérations DOM et fusionner plusieurs opérations DOM en une seule.

Pour résumer, le redessinage et la redistribution sont des facteurs importants qui affectent les performances de la page. Les développeurs doivent comprendre leurs concepts et leurs impacts, optimiser correctement le code et réduire le nombre d'opérations de redessinage et de redistribution pour améliorer les performances des pages et l'expérience utilisateur.

Référence :

• [Optimisation du rendu du navigateur : fonctionnement des navigateurs](https://developers.google.com/web/fundamentals/performance/rendering?hl=zh-cn#maintain-style-consistency)
• [ Comprendre Repaint et Reflow en JavaScript](https://medium.com/reloading/javascript-start-up-performance-69200f43b201#.du2iynrih)

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!