Réduire les accès au DOM via JavaScript

Ce que dit le référentiel

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.

Notre avis

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.