Explorez les similitudes, les différences et les champs applicables de redistribution et de redessinage

Discussion approfondie sur reflow et repaint : différences et scénarios d'application, des exemples de code spécifiques sont nécessaires

Avant-propos :

Dans le développement front-end, reflow (reflow) et repaint (repaint) sont des concepts courants. Ils sont étroitement liés au rendu des pages et sont cruciaux pour l’optimisation des performances. Cet article approfondira les différences entre la redistribution et le redessinage et leurs scénarios d'application, et donnera des exemples de code spécifiques.

1. Qu'est-ce que la refusion ?

Reflow fait référence au processus par lequel le navigateur recalcule et dessine les éléments modifiés. Lorsque nous modifions le style d'un élément (par exemple en modifiant la largeur, la hauteur et la position), le navigateur recalculera les propriétés géométriques de l'élément et de ses sous-éléments et restituera la page. Ce processus est relativement gourmand en performances.

Reflow entraînera le calcul et la disposition d'autres éléments, sa surcharge est donc bien supérieure à celle d'un redessin. Plusieurs fois, nous devons éviter les redistributions fréquentes pour améliorer les performances des pages.

2. Qu'est-ce que repeindre ?

Redessiner signifie que le navigateur redessine la page en fonction des informations de style de l'élément, mais ne modifie pas les propriétés géométriques de l'élément. Lorsque nous modifions uniquement la couleur, l'arrière-plan et d'autres styles de l'élément qui n'ont rien à voir avec les propriétés géométriques, le navigateur effectuera uniquement une opération de redessinage sans redistribution.

Redessiner est moins coûteux car il suffit de redessiner la partie déjà affichée et n'affectera pas la disposition des autres éléments. Mais trop de redessinage aura quand même un certain impact sur les performances.

3. La différence entre la redistribution et le redessinage

La plus grande différence entre la redistribution et le redessinage réside dans la surcharge de performances et la portée de l'impact.

La redistribution coûte cher : la redistribution amènera le navigateur à recalculer et à restituer les éléments, et la portée de l'impact est généralement la page entière ou une partie de la page. Si l'opération de redistribution est déclenchée fréquemment, les performances de rendu de la page diminueront, voire la page se figera.

Le coût de redessiner est moindre : redessiner ne redessinera que les éléments avec des styles modifiés, et n'entraînera pas le recalcul et la mise en page de la page. Par conséquent, la surcharge de redessinage est relativement faible et a un faible impact sur les performances de la page.

4. Scénarios d'application de reflow et de redraw

1. Réduire les opérations de reflow : Pendant le développement, vous devez essayer d'éviter de déclencher fréquemment des opérations de reflow. Vous pouvez réduire l'apparition de redistribution grâce aux points suivants :

• Utilisez l'attribut position pour remplacer top/left et d'autres opérations qui modifient la position de l'élément. Vous pouvez à la place utiliser transform: translation() pour déplacer l'élément. L'attribut transform provoquera uniquement un redessin sans déclencher de redistribution.
• Évitez de manipuler les attributs de style dans une boucle. Vous pouvez utiliser la modification par lots des styles pour réduire le nombre de redistributions.
• Pour éviter d'obtenir des informations sur la disposition des éléments lors du chargement de la page, vous pouvez utiliser une méthode asynchrone pour obtenir des informations sur la disposition.

Exemples de code spécifiques :

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.width = '200px';
  element.style.height = '200px';
  element.style.left = i * 10 + 'px';
}

// 正确示例，减少回流
element.style.position = 'absolute';
for (let i = 0; i < 100; i++) {
  element.style.transform = 'translateX(' + i * 10 + 'px)';
}

2. Utilisation raisonnable des opérations de redessin : Dans certains cas où seul le style change, le redessin peut être utilisé pour optimiser les performances.

Exemple de code spécifique :

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.backgroundColor = 'red';
}

// 正确示例，只触发重绘
for (let i = 0; i < 100; i++) {
  element.style.color = 'red';
}

Résumé :

La redistribution et le redessin sont des concepts courants dans le développement front-end et sont cruciaux pour l'optimisation des performances des pages. La surcharge de redistribution est plus importante et la surcharge de redessinage est plus petite. Pendant le développement, vous devez essayer d'éviter de déclencher fréquemment des opérations de redistribution et d'utiliser les opérations de redessin de manière rationnelle pour réduire la surcharge de performances. Ce qui précède est une discussion approfondie des différences et des scénarios d'application de la redistribution et du redessinage. J'espère que cela sera utile au développement front-end de chacun.

Référence :

• [Pourquoi la redistribution est-elle si lente](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)

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!