Bonne pratique
L’accès au DOM (Document Object Model) via JavaScript est une procédure lourde qui consomme beaucoup de cycles processeur (CPU). Réduire autant que possible ces accès.
Pour cela, vous pouvez assigner le nœud dans des variables que vous réutiliserez lors du cycle de vie de l’application, ce qui évite de retraverser l’arbre à chaque manipulation du document.
Il est également possible d’utiliser des bibliothèques de type « Shadow DOM », qui optimisent les modifications de l’arbre par un système de batch.
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.
Grâce au Virtual DOM de React.js, nous minimisons les accès directs au DOM en utilisant une approche de mise à jour virtuelle. React crée une copie légère du véritable DOM et suit les modifications à apporter, ce qui réduit les cycles CPU.
Lorsqu'une mise à jour est nécessaire, React compare le Virtual DOM avec la version précédente et effectue uniquement les modifications nécessaires sur le vrai DOM de manière optimisée. Cela permet de réutiliser les nœuds et de limiter les retraversées de l'arbre, réduisant ainsi l'empreinte environnementale.
Règle de validation
Le nombre d'accès à un élément HTML sans passer par une variable locale doit être inférieur ou égal à 0
Ressources économisées