Qu'est-ce que la refusion et le redessinage

Reflow signifie que lorsque la disposition de la page change, le navigateur doit recalculer la position et la taille des éléments dans l'arbre de rendu. Ce processus implique de parcourir l'arbre de rendu, de calculer les propriétés géométriques de chaque élément, puis de mettre à jour le. La mise en page est une opération très gourmande en performances car elle déclenche la redistribution de la page entière par le navigateur. Le redessin signifie que lorsque le style de la page change, le navigateur doit redessiner les éléments concernés. Le redessin n'implique pas le calcul de la mise en page, il suffit de redessiner l'apparence des éléments. Par rapport au redessin, la performance du redessin est. Moins de frais généraux.

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

La redistribution et le redessin sont des concepts très importants dans l'optimisation des performances des pages Web. Avant de comprendre ces deux concepts, nous devons d’abord comprendre le processus de rendu des pages du navigateur.

Lorsque le navigateur charge une page Web, il analyse le document HTML dans une arborescence DOM, puis analyse les styles CSS dans une arborescence CSSOM. Ensuite, le navigateur fusionnera l'arborescence DOM et l'arborescence CSSOM dans une arborescence de rendu (Render Tree). Enfin, le navigateur présente et dessine la page selon l'arborescence de rendu.

Reflow signifie que lorsque la mise en page de la page change, le navigateur doit recalculer la position et la taille des éléments dans l'arborescence de rendu. Ce processus implique de parcourir l'arbre de rendu, de calculer les propriétés géométriques de chaque élément, puis de mettre à jour la mise en page. La redistribution est une opération très gourmande en performances car elle incite le navigateur à relayer la page entière.

Repaint signifie que lorsque le style de la page change, le navigateur doit redessiner les éléments concernés. Le redessinage n'implique pas de calculs d'implantation, il nécessite seulement de redessiner l'apparence de l'élément. Par rapport à la redistribution, le redessinage entraîne moins de performances.

L'apparition fréquente de refusions et de redessins entraînera une diminution des performances des pages, il est donc nécessaire de minimiser le nombre de redistributions et de redessins dans le développement Web. Voici quelques opérations courantes qui conduisent à une redistribution et à un redessinage :

1 Modifier les propriétés géométriques des éléments DOM, telles que la modification de la largeur, de la hauteur, de la position, etc. de l'élément.

2. Modifiez le style des éléments DOM, comme changer la couleur d'arrière-plan, la taille de la police, etc.

3. Ajoutez ou supprimez des éléments DOM.

4. Modifiez la taille de la fenêtre du navigateur.

Afin de réduire le nombre de reflows et de redessins, nous pouvons adopter les stratégies d'optimisation suivantes :

1 Utilisez l'attribut CSS transform au lieu de modifier la position et la taille des éléments. L'attribut transform ne déclenche pas de redistribution, mais uniquement un redessin, de sorte que la surcharge de performances est faible.

2. Modifiez les attributs de style qui doivent être modifiés plusieurs fois ensemble, puis appliquez-les aux éléments DOM. Cela réduit le nombre de refusions et de redessins.

3. Utilisez Document Fragment pour ajouter ou supprimer des éléments DOM par lots. Un fragment de document est un conteneur DOM temporaire dans lequel plusieurs opérations DOM peuvent être placées, puis le contenu du fragment de document est ajouté à la page en même temps, ce qui peut réduire le nombre de redistributions.

4. Pour éviter de modifier fréquemment la taille de la fenêtre du navigateur, vous pouvez utiliser la limitation ou l'anti-rebond pour contrôler la fréquence de déclenchement des événements.

En bref, la redistribution et le redessin sont des problèmes sur lesquels il faut se concentrer dans l'optimisation des performances des pages Web. En réduisant le nombre de redistributions et de redessins, nous pouvons améliorer les performances de rendu des pages Web et améliorer 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!