À retenir
- C'est une version allégée du DOM réel stockée en mémoire.
- Il permet de calculer les différences (le « diffing ») entre l'ancien et le nouvel état de l'interface.
- Il améliore les performances en limitant les mises à jour coûteuses du navigateur au strict nécessaire.
Le DOM virtuel est une copie légère et simplifiée de la structure d'une page web conservée en mémoire vive. C'est un peu comme un plan d'architecte sur lequel on fait des essais de décoration : on teste tous les changements sur ce plan avant de décider quels meubles déplacer réellement dans la maison pour éviter de se fatiguer inutilement.
Étymologie
Le terme provient de l'acronyme anglais Virtual Document Object Model. Le DOM est l'interface qui structure une page HTML en arbre d'objets, et l'adjectif « virtuel » souligne que cette structure n'est pas celle que le navigateur affiche directement, mais une représentation intermédiaire gérée par un script.
Exemples d'usage
- Une application de messagerie qui met à jour uniquement le nouveau message reçu sans rafraîchir toute la conversation.
- Un tableau de bord financier où les prix des actions clignotent en temps réel sans que la page ne saute ou ne ralentisse.
Cas d'usage
Ce concept est au cœur des frameworks JavaScript modernes comme React ou Vue.js. Il intervient dès qu'une interface web doit être très dynamique et réagir instantanément aux actions de l'utilisateur ou à l'arrivée de nouvelles données depuis un serveur.
Bonnes pratiques
Lorsqu'on travaille avec un DOM virtuel, il ne faut jamais manipuler le DOM réel directement (avec des commandes comme getElementById), car cela casse la synchronisation. Il est aussi crucial d'utiliser des identifiants uniques (clés) pour les éléments d'une liste afin que l'algorithme sache exactement quel élément a changé.
Synonymes
Antonymes
Conseil
Si vous débutez en développement web, retenez que le DOM virtuel est un intermédiaire intelligent qui s'occupe de la partie laborieuse de l'affichage pour vous laisser vous concentrer sur la logique de votre application.
Questions fréquentes
Pourquoi ne pas modifier directement la page ?
Modifier la page web réelle est une opération très lente pour le navigateur. Le DOM virtuel permet de regrouper les changements et de ne faire qu'une seule mise à jour optimisée.
Est-ce la même chose que le Shadow DOM ?
Non. Le Shadow DOM est une technologie du navigateur pour isoler le style des composants, tandis que le DOM virtuel est un concept de programmation pour optimiser les performances.