Rendre les éléments du DOM invisibles lors de leur modification

Ce que dit le référentiel

Lorsqu’un élément du DOM (Document Object Model) doit être modifié par plusieurs propriétés, chaque changement de style ou de contenu va générer un repaint ou un reflow. Aussi est-il généralement plus économe de :

• rendre l’élément invisible (passer la propriété display à none) (1 reflow) ;
• modifier toutes les propriétés de l’élément et rendre l’élément à nouveau visible (1 reflow).

Soit 2 reflow au maximum.

Notre avis

Le Virtual DOM de React.js permet de limiter les reflows en calculant les différences entre l'état actuel et l'état souhaité des éléments à modifier. React créé un arbre virtuel et analyse quelles parties du DOM nécessitent des modifications avant d'effectuer les changements réels.

En modifiant les éléments de manière asynchrone dans le Virtual DOM, puis en appliquant les mises à jour en une seule opération, React minimise les réflows. Cela permet d'éviter les multiples redessins coûteux pour une performance accrue et une consommation énergétique réduite.