Explication détaillée de l'utilisation de Repaint et Reflow dans les connaissances JavaScript_Basic

Avez-vous souvent entendu des seniors ou des seniors du front-end dire que vous ne pouvez pas utiliser le caractère générique CSS *, que l'empilement des sélecteurs CSS ne peut pas dépasser trois niveaux, utilisez autant que possible les sélecteurs de classe en CSS, utilisez moins les tableaux lors de l'écriture HTML et le la structure doit être aussi simple que possible - Arbre DOM En attendant ces conseils, je savais à peu près que l'utilisation de caractères génériques ou de trop de niveaux de sélecteurs CSS pouvait réduire les performances. Quant à la raison pour laquelle je n'utilise pas de balises de table, j'ai toujours été confus, donc j'ai juste suivi ça, mais après avoir appris à connaître Repain et Reflow, il s'avère que ceux-ci ne peuvent vraiment pas être trop utilisés. ok, j'espère que cet article vous sera utile !

1. Qu'est-ce que Repaint/Reflow ?

D'accord, prenons d'abord une photo : le flux de travail général de l'analyse du navigateur

Cette image doit être facile à comprendre et peut être résumée en quatre étapes :

1. Analyser le HTML pour créer une arborescence DOM : le moteur de rendu commence à analyser le document HTML et à convertir les balises html de l'arborescence ou des balises générées par js en nœuds DOM, ce qui est appelé -- arborescence de contenu.
2. Créez un arbre de rendu : analysez le CSS (y compris les fichiers CSS externes et les éléments de style ainsi que les styles générés par js), calculez le style du nœud en fonction du sélecteur CSS et créez un autre arbre : l'arbre de rendu.
3. Arbre de rendu de mise en page : Appelé récursivement depuis le nœud racine, calculez la taille, la position, etc. de chaque élément, et donnez à chaque nœud les coordonnées précises où il doit apparaître à l'écran.
4. Dessinez l'arbre de rendu : parcourez l'arbre de rendu et chaque nœud sera dessiné à l'aide de la couche backend de l'interface utilisateur.

D'accord, nous pouvons voir que Repain et Reflow apparaissent respectivement dans les troisième et quatrième étapes. Nous donnons donc la définition suivante :

Chaque élément de la structure DOM possède sa propre boîte (modèle), qui oblige le navigateur à calculer selon différents styles (navigateur, défini par le développeur, etc.) et à y placer les éléments en fonction des résultats du calcul. Ce processus est appelé redistribution ; lorsque la position, la taille et d'autres attributs de diverses cases, tels que la couleur, la taille de la police, etc., sont déterminés, le navigateur dessine ces éléments en fonction de leurs caractéristiques respectives, de sorte que le contenu de la page apparaît. le processus est appelé repeindre.
On peut voir que ces deux éléments sont très importants pour que le navigateur restitue la page et qu'ils affecteront les performances. Par conséquent, nous devons comprendre certaines opérations courantes qui entraîneront la repeinture et la redistribution, et elles doivent être minimisées pour améliorer l'apparence. vitesse de rendu.

2. Certaines opérations qui provoquent du Repain et du Reflow

Le coût de Reflow est bien plus élevé que celui de Repaint. Chaque nœud de l'arborescence DOM aura une méthode de redistribution. La redistribution d'un nœud est susceptible de conduire à la redistribution des nœuds enfants, voire des nœuds parents et des nœuds frères. Cela peut convenir sur certains ordinateurs hautes performances, mais si la redistribution se produit sur un téléphone mobile, le processus est très pénible et consommateur d'énergie.
Par conséquent, les actions suivantes seront probablement relativement coûteuses.

• Lorsque vous ajoutez, supprimez ou modifiez des nœuds DOM, cela entraînera une redistribution ou un repaint.
• Lorsque vous déplacez la position du DOM ou créez une animation.
• Lorsque vous modifiez les styles CSS.
• Lorsque vous redimensionnez la fenêtre (la version mobile n'a pas ce problème), ou lors du défilement.
• Lorsque vous modifiez la police par défaut d'une page Web.

Remarque : display:none déclenchera la refusion, tandis que visibilité:hidden déclenchera uniquement la repeinture car aucun changement de position n'est trouvé.
3. Comment optimiser ?

Le reflow est inévitable, et son impact sur les performances ne peut être que minimisé. Voici quelques suggestions :

Ne modifiez pas le style DOM un par un. Au lieu de faire cela, il est préférable de prédéfinir la classe CSS puis de modifier le nom de la classe DOM :

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

Modifiez le DOM après l'avoir mis hors ligne. Tel que :
a> Utilisez l'objet documentFragment pour faire fonctionner le DOM en mémoire.
b> Donnez d'abord l'affichage DOM : aucun (une repeinture), puis vous pourrez le modifier comme vous le souhaitez. Par exemple, modifiez-le 100 fois puis affichez-le à nouveau.
c> Clonez un nœud DOM dans la mémoire, puis modifiez-le comme vous le souhaitez. Une fois la modification terminée, échangez-le avec celui en ligne.

Ne mettez pas les valeurs d'attribut des nœuds DOM dans une boucle en tant que variables dans la boucle. Sinon, cela entraînera un grand nombre de lectures et d'écritures des attributs du nœud.

Modifiez autant que possible les nœuds DOM de niveau inférieur. Bien sûr, la modification des nœuds DOM de niveau inférieur peut entraîner une grande zone de redistribution, mais l'impact peut également être faible.

Si vous utilisez une position fixe ou absolue pour les éléments HTML animés, modifier leur CSS réduira considérablement la redistribution.

N'utilisez jamais la disposition des tableaux. Parce qu’un petit changement peut entraîner une réorganisation de l’ensemble du tableau.

Après avoir compris cela, êtes-vous plus intéressé par les principes des navigateurs ? OK, je mettrai à jour l'article sur les principes des navigateurs plus tard, ou vous pouvez d'abord en rechercher d'autres, car je pense qu'il est vraiment important de comprendre les principes des navigateurs, qui peuvent nous aider à écrire des sites Web avec de meilleures performances.