Qu’est-ce que le Virtual DOM ?

Si vous utilisez des bibliothèques comme React, Preact ou encore VueJS, alors vous utilisez un virtual DOM (peut-être sans le savoir).

Mais à quoi sert-il, en quoi améliore-t-il les performances d’une application web, et quelles sont les alternatives !

C’est ce que nous allons voir ensemble dans cet article !

Commençons par le DOM

Avant de parler du Virtual DOM, rappelons ce qu’est le DOM tout court.

Le DOM (Document Object Model) est une représentation de la page HTML par le navigateur, sous la forme d’un arbre d’éléments (des balises et des nœuds de texte).

Chaque élément, chaque attribut, devient un objet que JavaScript peut manipuler.

Modifier le DOM en JavaScript, c’est donc agir directement sur cette structure : ajouter un élément, changer une classe, supprimer un nœud… Mais ces opérations sont coûteuses.

Chaque changement demande au navigateur de :

• recalculer la mise en page (reflow)
• redessiner l’écran (repaint)
• relancer des animations ou du CSS.

Des mises à jour trop fréquentes

Quand une application devient complexe (interactions fréquentes, nombreux composants, données dynamiques…), alors les mises à jour du DOM se multiplient.

Et modifier le DOM à chaque petit changement d’état a des conséquence sur les performances.

Cela peut créer des ralentissements et rendre l’interface saccadée. Heureusement, on a le Virtual DOM.

Une copie virtuelle du DOM

Le Virtual DOM est une copie virtuelle (en mémoire) du DOM réel.

Quand un changement d’état survient dans notre application (React ou Vue), comme un clic de l’utilisateur, voici ce qui se passe:

1. Un nouvel arbre virtuel représentant le nouvel état de l’interface est généré en mémoire.
2. On compare cet arbre avec le précédent (appelé “diffing”).
3. On calcule les ****changements minimums nécessaires à appliquer sur le vrai DOM.
4. On exécute ces changements de façon groupée et optimisée.

Ce processus s’appelle la reconciliation, et c’est ce qui rend le Virtual DOM performant.

Une analogie pour mieux comprendre

Imaginez un designer qui doit mettre à jour un document imprimé.

Il y a une version papier (le DOM réel), et une version numérique (le Virtual DOM). Plutôt que de réimprimer tout le document à chaque petite modification, on compare les deux versions, on fait tous les changements et on ne réimprime que les pages modifiées.