Le DOM virtuel est une représentation légère en mémoire de l’arbre DOM réel, utilisée par certaines bibliothèques JavaScript (comme React ou Vue) pour optimiser les mises à jour de l’interface utilisateur et réduire les accès coûteux au DOM natif.
C’est une technique de performance pour minimiser les manipulations directes du DOM réel.
Pourquoi existe-t-il ? Le problème du DOM réel
Le DOM du navigateur est lent à modifier :
- Chaque changement (ex. :
element.innerHTML = …) peut déclencher un recalcul de style, une relayout, un repeint → coûteux en CPU. - Mettre à jour 100 éléments un par un = 100 re-rendus → interface saccadée.
Le DOM virtuel résout cela en regroupant les modifications et en ne touchant le DOM réel qu’une seule fois.
Comment ça marche ? (en 3 étapes)
- Création du Virtual DOM
→ À chaque changement d’état (ex. : clic, données API), la bibliothèque reconstruit en mémoire une copie légère du DOM futur. - Diffing (comparaison)
→ Un algorithme compare le Virtual DOM actuel avec le précédent pour identifier les différences minimales. - Reconciliation (mise à jour ciblée)
→ Seules les modifications nécessaires sont appliquées au DOM réel → gain de performance.
Analogie simple :
- DOM réel = une maison physique.
- Virtual DOM = un plan 3D sur ordinateur.
- Au lieu de casser un mur chaque fois qu’on veut essayer une déco, on simule les changements sur le plan, puis on fait une seule intervention réelle.
Implémentations connues
| Bibliothèque | Utilise un Virtual DOM ? |
|---|---|
| React | Oui (cœur de sa performance) |
| Vue.js (v2) | Oui |
| Vue.js (v3) | Oui (optimisé) |
| Svelte | Non → compile les mises à jour au build |
| SolidJS | Non → réactivité fine sans VDOM |
| Preact | Oui (version légère de React) |
Tendance récente : certaines bibliothèques abandonnent le Virtual DOM au profit de la compilation statique (Svelte) ou de la réactivité fine (SolidJS), car le VDOM a un coût mémoire.
DOM réel vs DOM virtuel
| DOM réel | DOM virtuel | |
|---|---|---|
| Nature | API du navigateur (standard) | Structure JavaScript en mémoire |
| Performance | Lent pour les mises à jour fréquentes | Rapide pour les UI dynamiques |
| Contrôle | Direct, mais coûteux | Indirect, mais optimisé |
| Mémoire | Fixe | Ajoute une couche en mémoire |
Idées reçues à corriger
- « Le Virtual DOM est toujours plus rapide » → Faux : pour des sites statiques ou peu interactifs, il alourdit inutilement.
- « C’est une technologie du navigateur » → Faux : c’est 100 % côté client, implémenté par des bibliothèques JavaScript.
- « Tous les frameworks l’utilisent » → Faux : Svelte, SolidJS, Qwik… n’en ont pas besoin.