Refusions et repeints en Javascript

Quelles sont les meilleures pratiques pour optimiser CSS afin de réduire les redistributions et les repaints inutiles, en particulier dans les applications à grande échelle ?

1. Reflow (Recalcul de la mise en page) :

Une redistribution (également appelée mise en page ou re-mise en page) se produit lorsque le navigateur recalcule la position, la taille et la disposition des éléments sur la page. Ce processus se produit chaque fois que la mise en page de la page change, par exemple lorsque des éléments sont ajoutés, supprimés, redimensionnés ou que leur visibilité change. C'est une opération plus complexe et plus longue

Exemple :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Quand se produit une refusion ?

• Ajout, suppression ou modification d'éléments DOM (par exemple, appendChild, RemoveChild).
• Modifier la mise en page en ajustant les styles CSS comme la largeur, la hauteur, la marge, le remplissage, etc.
• Redimensionner la fenêtre ou modifier la taille des éléments.
• Modifier la taille de la police ou les propriétés de la police.
• Utiliser des méthodes comme offsetWidth, offsetHeight, scrollTop, getBoundingClientRect() car elles obligent le navigateur à recalculer la mise en page.

Comment fonctionne la redistribution :

Lorsque vous modifiez quelque chose qui affecte la mise en page de la page, le navigateur doit :

1. Recalculez les positions et les dimensions de tous les éléments concernés par le changement.
2. Reconstruisez l'arborescence de mise en page, qui est la représentation interne de la façon dont les éléments sont disposés.

Si de nombreux éléments sont affectés par un seul changement, la redistribution peut être coûteuse et ralentir les performances de votre site.

2. Repeindre (Mise à jour visuelle)

Un repeindre (ou redessiner) se produit lorsque les propriétés visuelles d'un élément changent mais pas la mise en page. C’est moins cher qu’une redistribution car elle nécessite uniquement de mettre à jour l’apparence des éléments sans recalculer leur position ou leur disposition. Les repeintures se produisent après le recalcul de la mise en page (dans les cas où les deux sont nécessaires) ou lorsque des propriétés n'affectant pas la mise en page sont modifiées, comme la couleur ou la visibilité.

Exemple :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Quand faut-il repeindre ?

• Modification des propriétés de couleur d'arrière-plan, de couleur de bordure ou de visibilité.
• Changer l'ombre de la boîte, le contour ou la couleur d'un élément.
• Mise à jour de l'opacité (opacité), des transformations (transformation) ou du z-index.

Une repeinture n'implique pas de recalculer la mise en page, c'est donc plus rapide que la refonte, mais cela nécessite quand même de redessiner des parties de la page, ce qui prend un certain temps.

Le pipeline de rendu

1. Construction DOM : le navigateur analyse le HTML pour créer l'arborescence DOM (Document Object Model).
2. Construction CSSOM : CSS est analysé pour construire l'arborescence CSSOM (CSS Object Model).
3. Construction de l'arbre de rendu : Le DOM et le CSSOM sont combinés pour créer l'arbre de rendu, qui contient les informations visuelles pour chaque élément visible.
4. Mise en page (Reflow) : Le navigateur calcule la position et la taille de chaque élément visible dans l'arbre de rendu.
5. Peinture : Le navigateur remplit les pixels en fonction des propriétés visuelles telles que les couleurs, les bordures, les ombres, etc.
6. Composite : Le navigateur compose les différents calques peints (pour les éléments complexes comme les animations, les transformations 3D, etc.) et les affiche à l'écran.

Impact sur les performances

• Reflow : Cher en termes de performances, surtout s'il affecte de grandes parties de la page ou est déclenché à plusieurs reprises (par exemple, en boucle ou lors d'un redimensionnement). Cela affecte la mise en page de la page et nécessite de recalculer les positions et les tailles des éléments.
• Repaint : Moins cher qu'une refusion mais impacte quand même les performances, surtout si de nombreux éléments doivent être repeints fréquemment.

Comment optimiser les refusions et les repeints

1. Minimiser la manipulation du DOM : utilisez des techniques telles que mises à jour groupées du DOM (comme mentionné précédemment) ou DocumentFragment pour apporter plusieurs modifications à la fois, au lieu de un par un.

2. Éviter le thrashing de la mise en page : Si vous lisez une propriété de mise en page (par exemple, offsetHeight) et écrivez immédiatement (modifiez la mise en page) dans le même cycle, cela force une redistribution, appelée mise en page. Pour éviter cela, séparez la lecture et l'écriture des propriétés DOM en différentes étapes.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

3. Utiliser les classes CSS : Au lieu de modifier les styles individuels, utilisez les classes CSS pour apporter des modifications. Le navigateur gère le changement de classe plus efficacement.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

4. Réduisez la complexité du CSS : évitez les éléments profondément imbriqués et les règles CSS trop complexes qui peuvent déclencher des reflows.

5. Utilisez visibilité : masquée au lieu d'affichage : aucune lorsque vous souhaitez simplement masquer un élément sans affecter la mise en page. display : aucun déclenche une refusion, tandis que visibilité : caché déclenche uniquement une repeinture.

Conclusion

• Les Reflows impliquent de recalculer la mise en page de la page et sont plus coûteux en termes de performances.
• Les repeintures mettent à jour l'apparence visuelle sans affecter la disposition et sont moins coûteuses.
• Réduire les deux permet de maintenir votre site réactif et rapide, améliorant ainsi l'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!