Virtual Document Object Model (VDOM)

Eintrag zuletzt aktualisiert am: 16.01.2023

Das Virtual Document Object Model (Virtual DOM/VDOM) ist ein Konzept vieler moderner Webfrontendframeworks (z.B. React und Vue.js sowie Blazor) bei dem Änderungen in der durch Templates gerenderten Oberfläche zunächst in einem JavaScript-Objektmodell zwischengespeichert werden. Erst wenn der Bedarf besteht, eine aktuelle Oberfläche anzuzeigen, werden die Änderungen auf das echte Document Object Model (DOM) übertragen werden.

Das Virtual DOM ist also eine interne Abbildung des tatsächlichen DOM (Document Object Model) des Webbrowsers. Wenn sich die Daten einer Anwendung ändern, wird das Virtual DOM verwendet, um Änderungen am DOM zu bündeln. Dies reduziert die Anzahl der Operationen, die auf das tatsächliche DOM ausgeführt werden müssen, und verbessert dadurch die Leistung der Anwendung.

Allerdings führt der ständige Abgleich zwischen Virtual DOM und DOM auch zu einem gehörigen Rechenaufwand. Einige moderne Webframeworks wie Solid und Svelte beweisen, dass gerade ein Verzicht auf das Virtual DOM in Verbindung mit einer "intelligenten" Änderungserkennung eine Webanwendung beschleunigen kann. Vue.js plant daher auch eine alternative Komponentenart, genannte "Vapor Components", die ohne Virtual DOM auskommt.

Virtual DOM bei Blazor

Bei Blazor Server/Server-Side-Blazor liegt das Virtual DOM auf dem Webserver und wird via ASP.NET SignalR über Websockets mit dem eigentlichen DOM im Browser synchronisiert.
Bei Blazor WebAssembly/Client-Side-Blazor existiert das das Virtual DOM im Webbrowser, allerdings innerhalb der Webassembly-Laufzeitumgebung. Hier erfolgt die Synchronisation mit dem DOM in der JavaScript-Umgebung.

Svelte

Beim Webframework Svelte gibt es kein Virtual DOM. Es wird vom Compiler Code erzeugt, der direkt das echte DOM verändert.

Angular

Angular verwendet statt eines Virtual DOM eine Änderungserkennung auf Basis von Zone.js
Mit dem neuen Ivy-Compiler für Angular gibt es als Alternative zu Zone.js ein Incremental DOM.

Virtual Document Object Model vs. Shadow Document Object Model

Das Virtual DOM darf nicht mit dem Shadow Document Object Model verwechselt werden. Ein Shadow Document Object Model (Shadow DOM) ist bei Web Components ein isolierter Teil des Gesamt-DOM eines HTML-Dokuments.