DOM-Größe

TL;DR

DOM-Größe beschreibt die Anzahl der HTML-Elemente einer Seite. Große DOMs verlangsamen alles: Rendering, JS-Operationen, Speicherverbrauch.

Was ist DOM-Größe?

Die DOM-Größe misst, wie viele Elemente (Nodes) ein HTML-Dokument hat. Je mehr Nodes, desto mehr muss der Browser verarbeiten – bei jedem Reflow, jedem Repaint, jedem querySelector.

Empfohlene Werte

• Ideal: < 1.500 Nodes
• Akzeptabel: 1.500 - 3.000
• Problematisch: > 3.000
• Max. Tiefe: < 32 Ebenen
• Kinder pro Element: < 60

Auswirkungen großer DOMs

• Langsames initiales Rendering
• Träge JavaScript-Selektoren
• Höherer Speicherverbrauch
• Langsamere Reflows bei Änderungen

DOM verkleinern

• Unnötige Wrapper-Elemente entfernen
• Lazy Loading für Off-Screen-Inhalte
• Virtualisierung für lange Listen
• Komponenten bewusst strukturieren

DOM-Größe und Nachhaltigkeit

Kleinere DOMs sind effizienter:

• Weniger zu parsen und zu rendern
• Weniger Speicherverbrauch
• Schnellere Interaktionen

Fazit

Die DOM-Größe ist ein oft übersehener Performance-Faktor. Weniger Elemente bedeuten schnellere Seiten.