Das Virtual DOM ist eine leichtgewichtige, im Speicher gehaltene Kopie des DOM. Frameworks wie React nutzen es, um Änderungen an der Oberfläche effizient umzusetzen, statt bei jedem Zustandswechsel die komplette Seite neu zu rendern.
Das Problem mit dem echten DOM
Das echte DOM ist eine Baumstruktur, die der Browser aus dem HTML aufbaut. Jede Änderung an einem Knoten kann Neuberechnungen von Layout und Darstellung auslösen. Wer bei jeder kleinen Interaktion das gesamte DOM neu aufbaut, merkt das als Ruckeln oder Verzögerung — besonders bei komplexen Single-Page-Anwendungen.
So funktioniert das Virtual DOM
- Bei einer Änderung wird ein neuer Virtual-DOM-Baum erzeugt — ein reines JavaScript-Objekt, das die gewünschte Struktur beschreibt.
- Der alte und der neue Baum werden miteinander verglichen (Diffing). Dabei zählt nur der Unterschied zwischen den beiden Versionen.
- Genau diese minimale Menge an Änderungen wird auf das echte DOM angewendet (Reconciliation).
Das Virtual DOM ist damit ein Zwischenspeicher: Es bündelt viele logische Änderungen zu wenigen echten DOM-Operationen und macht Oberflächen dadurch spürbar schneller.
Komponenten und JSX
In React wird die Oberfläche aus JSX-beschriebenen Komponenten aufgebaut. Jede Komponente liefert eine Beschreibung des gewünschten Zustands — das Framework übernimmt den Abgleich mit dem Virtual DOM und aktualisiert nur die betroffenen Stellen.
Praxis-Tipps
- Das Virtual DOM ersetzt das echte DOM nicht — es ist eine Optimierungsschicht davor.
- Bei sehr großen Listen helfen Schlüssel (Keys), damit der Diff-Algorithmus Elemente wiedererkennt.
- Das Konzept ist kein Ersatz für saubere Architektur: Auch mit Virtual DOM bleiben State Management und Datenfluss entscheidend.
Verwandte Grundlagen: DOM, React, JSX, Framework, JavaScript-Befehle.