Réduire au maximum le repaint (appearence) et le reflow (layout)

Identifiants

Catégories

Indications

Description

Le repaint est le changement d’apparence d’un élément du DOM (Document Object Model), tandis que le reflow est le changement/ recalcul de la position des éléments dans le DOM. Ces deux opérations sont coûteuses en ressources, notamment en cycles CPU : il faut donc éviter de les déclencher.

Exemple

Pour éviter les repaint, ne pas modifier les propriétés stylistiques d’un élément (couleur de fond, style de bordure, couleur du texte, taille, etc.).

Pour éviter les reflow, limiter les changements de propriétés de position, de dimension, de type de positionnement, de contenu, etc. Cette suggestion est notamment valable pour certains éléments HTML tels que les tables, dont le reflow peut nécessiter jusqu’à trois fois plus de temps qu’un élément équivalent avec un block display.

Pour aller plus loin : https://developers.google.com/speed/articles/reflow

Principe de validation