Guides

Toute personne qui apprend React ou Vue tombe très vite sur l’expression « DOM virtuel », et cela ressemble souvent à de la magie. Ça n’en est pas : c’est une idée simple et concrète qui explique comment les frameworks front-end modernes gardent une page synchronisée avec vos données, sans que vous ayez à manipuler la page à la main.

Le problème qu'il résout

Pour comprendre le problème qu’il résout, rappelez-vous ce qu’est le vrai DOM : l’arbre vivant des éléments que le navigateur affiche. Le mettre à jour directement — créer des nœuds, définir des attributs, réordonner les enfants — est à la fois lent quand on le fait beaucoup et source d’erreurs quand on le fait à la main. Maintenir correcte une interface complexe à mesure que les données changent, avec des modifications manuelles du DOM partout, c’est précisément là que les bugs prolifèrent.

Ce qu'est le virtual DOM

Le DOM virtuel est la réponse du framework. C’est une copie légère de l’interface conservée en mémoire sous forme d’objets JavaScript simples — un arbre qui décrit ce à quoi la page devrait ressembler à l’instant présent. Il est peu coûteux à créer et à jeter, car rien en lui ne touche le navigateur tant que le framework n’en décide pas autrement.

• Une copie légère de l’interface en mémoire, sous forme d’objets simples
• À chaque changement d’état, un nouvel arbre est construit puis comparé (réconciliation)
• Seules les modifications minimales du vrai DOM sont appliquées
• Permet le modèle déclaratif « l’interface = une fonction de l’état »
• React et Vue l’utilisent ; Svelte et Solid s’en passent volontairement

Comment fonctionne le diffing

Voici le cycle. Lorsque votre état change, le framework construit un tout nouvel arbre de DOM virtuel représentant l’interface souhaitée. Il compare ensuite ce nouvel arbre avec le précédent — une étape appelée diffing ou réconciliation — et détermine le plus petit ensemble de modifications du vrai DOM nécessaires pour passer de l’ancienne image à la nouvelle.

C’est ce dernier point qui compte. Au lieu que vous cherchiez « quels nœuds dois-je ajouter, supprimer ou mettre à jour ? », le framework calcule le patch minimal et n’applique que celui-ci au vrai DOM. Les opérations coûteuses du navigateur sont regroupées et réduites au minimum, si bien que la page se met à jour efficacement même lorsque beaucoup d’état a changé d’un coup.

Le vrai bénéfice : un modèle déclaratif

Mais la vitesse n’est que la moitié du bénéfice, et sans doute pas la principale. Le vrai gain, c’est le modèle de programmation que le DOM virtuel rend praticable : vous écrivez votre interface comme une fonction de l’état — vous décrivez ce à quoi la page doit ressembler pour les données actuelles — et vous laissez le framework réconcilier la différence. Ce style déclaratif remplace l’approche impérative et fragile qui consiste à « muter le DOM étape par étape ».

React et Vue

React comme Vue reposent sur cette idée, chacun avec ses propres implémentations et optimisations. Lorsque vous écrivez un composant qui renvoie du balisage à partir de ses données, vous décrivez en réalité un arbre de DOM virtuel ; le framework se charge du diffing et des véritables mises à jour du DOM en coulisses. C’est pour cela que vous appelez rarement vous-même des méthodes du DOM dans l’un ou l’autre.

Les limites, honnêtement

Il faut être honnête sur les limites. Un DOM virtuel n’est pas automatiquement l’approche la plus rapide possible — le diffing lui-même a un coût. Des frameworks plus récents comme Svelte et Solid se passent du DOM virtuel : ils compilent les composants en mises à jour fines qui touchent le DOM directement. Le DOM virtuel est donc une bonne stratégie, pas la seule — mais pour React et Vue, il est au cœur de leur fonctionnement.

À retenir

En résumé, le DOM virtuel est un modèle en mémoire de votre interface, que le framework compare à la version précédente pour mettre à jour le vrai DOM avec le moins de travail possible. Sa valeur durable ne tient pas qu’à la performance, mais au modèle déclaratif qu’il permet : vous décrivez le résultat, et le framework trouve les étapes.