J'ai lu beaucoup de questions sur la redistribution récemment, mais je n'avais pas remarqué ce phénomène auparavant. Récemment, j'ai commencé à l'étudier lentement. Après tout, je n'ai pas prêté attention à de nombreux détails de performances dans le passé. Concernant la reflow, il faut simplement dire qu'il s'agit du rendu du DOM (calcul de la taille, de la disposition, etc. de chaque objet dans l'arborescence du document via CSS ou d'autres facteurs. L'explication peut être unilatérale, mais définissez d'abord un). concept simple pour faciliter la compréhension.
Tout d'abord, j'ai vu l'ordre d'écriture des attributs CSS recommandé dans Mozilla. Cet article était basé sur les informations. Cet ordre d'écriture est non seulement dû aux normes de spécification du code de développement du projet, mais aussi parce qu'un ordre d'écriture raisonnable est plus conforme à celui-ci. l'ordre de rendu du navigateur.
Styles de base de Mozilla.org
* maintenu par fantasai
* (classes définies dans le Guide de balisage -http://mozilla.org/contribute/writing/markup)
*/
/* Ordre suggéré :
//afficher les propriétés
*afficher
*style de liste
*position
* flotter
*clair
//Attributs personnels
*largeur
*hauteur
* marge
*rembourrage
* frontière
* arrière-plan
//Attributs de texte
* couleur
*fonte
* décoration de texte
* aligner le texte
*alignement vertical
*espace blanc
*autre texte
* contenu
Ce "Visual Reflow" souligne de manière très vivante le processus de rendu du navigateur. À partir de là, vous pouvez voir que le navigateur ne place pas correctement tout le DOM en une seule étape pendant le processus de chargement, mais après un calcul constant, les résultats du rendu sont fréquemment. modifié, ce qui inclut l'impact de js, css, etc. sur les performances de dom.