Bonne pratique
Pour limiter le nombre de repaint/reflow, il est conseillé de ne pas modifier des propriétés une à une. Préférer l’ajout/la suppression de classes CSS, ce qui permet de modifier en une seule fois plusieurs propriétés, tout en ne générant qu’un repaint/reflow.
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.
Le Virtual DOM de React optimise les manipulations et mises à jour en batchant les modifications avant de les appliquer au réel DOM. Cela permet de limiter les repaints et reflows, car les changements sont effectués de manière groupée.
Concrètement, en utilisant le Virtual DOM avec React, nous pouvons modifier plusieurs propriétés CSS simultanément par l'application d'une unique classe, réduisant ainsi l'impact sur la performance et l'empreinte environnementale du site.
Règle de validation
Le nombre de déclarations CSS pouvant être regroupées en une seule (margin, padding, ...), et n'utilisant pas la version courte doit être inférieur ou égal à 0
Ressources économisées