Dans le navigateur, lorsque nous modifions la taille, la position, la couleur, etc. d'un élément, le navigateur recalculera et affichera la page. Parmi elles, ces deux étapes sont appelées CSS reflow (reflow) et repaint (repaint).
La redistribution CSS signifie que lorsque la taille, la disposition ou la position d'un élément DOM change, le navigateur doit recalculer les propriétés géométriques de l'élément et reconstruire l'arborescence de rendu de la page. La redistribution provoquera certainement un redessin, mais le redessin ne déclenchera pas nécessairement la redistribution.
Le redessinage CSS signifie que lorsque le changement de style de l'élément n'affecte pas la mise en page, le navigateur n'a qu'à redessiner l'élément sans recalculer la mise en page. Par exemple, changer la couleur d’un élément provoquera uniquement un redessin et ne déclenchera pas de redistribution.
Étant donné que la redistribution et le redessinage nécessitent que le navigateur recalcule et restitue la page, ils entraîneront des pertes de performances. Par conséquent, lors de l'écriture du code, vous devez essayer d'éviter les redistributions et redessinages fréquents. Vous pouvez prendre les mesures d'optimisation suivantes :
- Évitez les modifications fréquentes des styles DOM.
- Utilisez la transformation pour remplacer les opérations haut/gauche et autres qui provoquent une redistribution.
- Utilisez un fragment de document (DocumentFragment) pour effectuer des opérations DOM, et enfin ajoutez-le au document immédiatement.
- Évitez d'utiliser des expressions CSS car elles entraînent un recalcul du navigateur à chaque fois.
- Évitez de lire fréquemment les informations de mise en page ou d'utiliser des attributs tels que des séries décalées, ce qui forcerait le navigateur à redistribuer.
En bref, écrire du code correctement et réduire les opérations de redistribution et de redessinage peut améliorer les performances des pages et l'expérience utilisateur.