Le repaint est le changement d’apparence d’un élément du DOM (Document Object Model), tandis que le reﬂow 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.

Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.

Plus d'informations sur collectif.greenit.fr et ecoconceptionweb.com.

Notre avis

Le Virtual DOM de React.js minimise le repaint et le reflow. En utilisant un arbre d'objets JavaScript, React compare l'ancienne et la nouvelle version du DOM. Cette démarche, appelée "diffing", permet de savoir exactement quelles parties du DOM nécessitent une mise à jour.

Avant de toucher le vrai DOM, React s'assure que seuls les changements nécessaires sont appliqués. Cela réduit significativement l'activité CPU puisque moins de recalculs et de re-rendus sont nécessaires. En se concentrant sur les modifications minimales, React contribue à une meilleure efficacité énergétique.

Règle de validation

Le nombre de modifications n'affectant pas le layout et occasionnant un repaint (ex: color, background, visibility) doit être inférieur ou égal à 1

Ressources économisées

Processeur

Bonne pratique précédente

Bonne pratique suivante