Que sont la redistribution et le redessinage CSS

La redistribution et le redessinage en CSS font référence aux deux étapes qui amènent le navigateur à recalculer et à restituer la page lorsque la taille, la position, la couleur et d'autres attributs de l'élément changent dans le navigateur. En raison de la redistribution et du redessinage, le dessin nécessite le navigateur. pour recalculer et restituer la page, cela entraînera des pertes de performances. Par conséquent, lors de l'écriture de code, vous devez essayer d'éviter les redistributions et les redessinages fréquents.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

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 :

1. Évitez les modifications fréquentes des styles DOM.
2. Utilisez la transformation pour remplacer les opérations haut/gauche et autres qui provoquent une redistribution.
3. Utilisez un fragment de document (DocumentFragment) pour effectuer des opérations DOM, et enfin ajoutez-le au document immédiatement.
4. Évitez d'utiliser des expressions CSS car elles entraînent un recalcul du navigateur à chaque fois.
5. É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.

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!