Reflow vs Repaint

Definition

Le reflow recalcule la géométrie de tous les éléments affectés (layout). Le repaint redessine les pixels sans changer la géométrie. Le reflow est bien plus coûteux car il déclenche aussi un repaint.

Analogie

Repaint = repeindre un mur (couleur). Reflow = abattre un mur et réaménager toute la pièce.

Exemple de code

/* Déclenche REFLOW (coûteux) */
element.style.width = '200px';  // layout change
element.style.margin = '10px';  // layout change

/* Déclenche REPAINT seulement */
element.style.color = 'red';    // visuel seulement
element.style.opacity = '0.5';  // visuel seulement

Cas d'usage

Déboguer les animations lentes en identifiant si le problème vient du reflow ou du repaint.

Anti-pattern

Termes lies