DOM Aktualisierung & Virtualisierung

Der DOM ist eine hierarchische Struktur, bei der jedes HTML-Element und jede Textknoten als Knoten (Node) in einem Baum dargestellt wird.

DOM API

Änderungen am DOM erfolgen über die vom Browser zur Verfügung gestellte DOM-API. Diese stellt Methoden wie getElementById() oder createElement() zur Verfügung.

Reflow und Repaint

Reine Farb- oder Styleänderungen sind i.d.R. kein Problem. Teile oder den gesamte DOM neu zu rendern ist allerdings sehr teuer und sollte vermieden werden. Dafür gibt es verschiedene Strategien:

Virtual Dom

Eine komplette Kopie des DOM wird im Speicher angelegt, um Änderungen schnell vornehmen zu können ohne direkt in den DOM zus schreiben. Dies passiert in den Javascript-Frameworks mit unterschiedlichen Technologien

Document Fragments

unsichtbare DOM-Container um mehrere Elemente gleichzeitig zu erstellen oder zu manipulieren. Kein Reflow nötig, da nicht Teil des sichtaren DOMs.

weitere Möglichkeiten

• Batching: Änderungen am DOM in einer Transaktion bündeln (React, Vue)
• CSS-Optimierung: keine komplexen Selektoren, ggf. durch CSS-Containment Elemente vom restlichen Layout isolieren.
• Position/Size-Änderungen vermeiden, besser transform und opacity nutzen
• RequestAnimationFrame: Callback Funktion, um unnötige Reflows innerhalb von Animationen zu vermeiden
• Offscreen Rendering: größere Layouts mit display: none rendern und anschließend anzeigen.
• Lazy Loading: Komponenten erst bei Bedarf laden und rendern. Vue und Angular unterstützen das nativ, React bietet React.lazy() oder Suspense
• Debouncing/Throttling: Events wie Scroll, Resize oder Input nur in Intervallen ausführen, statt sofort bei jedem Event.

Reactivity / State Management

VueJs

bietet ein bidirektionales reaktives Datenbindungssystem, das auf Proxies (ab Vue 3). Es verfolgt, welche Teile des DOMs von welchen Daten abhängen, und sorgt dafür, dass nur diese Teile des DOMs neu gerendert werden, wenn sich die entsprechenden Daten ändern. Damit ist Vue u.a. druch Declarative Rendering und den Virtual DOM sehr effizient und schnell.

• State Management: Vuex oder Pinia.

React

nutzt einen unidirektionalen Datenfluß mit Reconciliation, bei dem Änderungen durch das integrierte State- und Prop-System (React State) im Virtual DOM überwacht werden. Datenübertragung von einem Kind-Element an das Elternelement wird mittels Callback-Pattern realisiert.

• State Management: Redux oder Recoil.

Angular

verwendet ein Zone.js-basiertes Change Detection-System. DOM wird ohne Virtualisierung bei Änderungen direkt aktualisiert (Dirty-Checking). State Austausch zwischen Komponenten per Dependency Injection.

• State Management: RxJs oder Akita.