Ein großer DOM-Baum kann die Seitenleistung auf verschiedene Arten verlangsamen:
Netzwerkeffizienz und Lastleistung
Eine große DOM-Struktur enthält häufig viele Knoten, die nicht sichtbar sind, wenn der Nutzer die Seite zum ersten Mal lädt. Dadurch erhöhen sich unnötigerweise die Datenkosten für Ihre Nutzer und die Ladezeit wird verlangsamt.
Laufzeitleistung
Wenn Nutzer und Skripts mit Ihrer Seite interagieren, muss der Browser ständig die Position und den Stil der Knoten neu berechnen. Ein großer DOM-Baum kann in Kombination mit komplizierten Stilregeln das Rendering erheblich verlangsamen.
Arbeitsspeicherleistung
Wenn in Ihrem JavaScript allgemeine Abfrageselektoren wie
document.querySelectorAll('li')
verwendet werden, speichern Sie möglicherweise unwissentlich Verweise auf eine sehr große Anzahl von Knoten, was die Speicherkapazität der Geräte Ihrer Nutzer überlasten kann.
So schlägt die Prüfung der Lighthouse-DOM-Größe fehl
Lighthouse meldet die gesamten DOM-Elemente für eine Seite, die maximale DOM-Tiefe der Seite und die maximalen untergeordneten Elemente:
![Vermeidet eine übermäßige DOM-Größe des Ligthhouse-Audits, die die Gesamtzahl der DOM-Elemente, die maximale DOM-Tiefe und die maximale Anzahl untergeordneter Elemente anzeigt.](https://developer.chrome.com/static/docs/lighthouse/performance/dom-size/image/lighthouse-excessive-dom-size-audit.png?authuser=6&hl=de)
Lighthouse meldet Seiten mit DOM-Bäumen, die
- Wird gewarnt, wenn das body-Element mehr als 800 Knoten hat.
- Fehler,wenn das Textelement mehr als 1.400 Knoten hat.
DOM-Größe optimieren
Suchen Sie im Allgemeinen nach Möglichkeiten, DOM-Knoten nur bei Bedarf zu erstellen und Knoten zu zerstören, wenn sie nicht mehr benötigt werden.
Wenn Sie einen großen DOM-Baum senden, versuchen Sie, Ihre Seite zu laden und manuell zu notieren, welche Knoten angezeigt werden. Vielleicht können Sie die nicht angezeigten Knoten aus dem anfänglich geladenen Dokument entfernen und sie erst nach einer relevanten Nutzerinteraktion wie Scrollen oder Klicken auf eine Schaltfläche erstellen.
Wenn Sie DOM-Knoten zur Laufzeit erstellen, können Sie mit DOM-Änderungshaltepunkten für Unterstrukturänderungen genau bestimmen, wann Knoten erstellt werden.
Wenn Sie einen großen DOM-Baum nicht vermeiden können, können Sie Ihre CSS-Selektoren auch vereinfachen, um die Rendering-Leistung zu verbessern. Weitere Informationen findest du unter Umfang und Komplexität von Stilberechnungen reduzieren.
Weitere Informationen finden Sie im Artikel Auswirkungen großer DOM-Größen auf die Interaktivität und was Sie dagegen unternehmen können.
Stack-spezifische Anleitung
Angular
Verwenden Sie beim Rendern großer Listen virtuelles Scrollen mit dem Component Dev Kit (CDK).
React
- Mit einer „Windowing“-Bibliothek wie
react-window
können Sie die Anzahl der erstellten DOM-Knoten minimieren, wenn Sie viele sich wiederholende Elemente auf der Seite rendern. - Minimieren Sie unnötige erneute Renderings mit
shouldComponentUpdate
,PureComponent
oderReact.memo
. - Überspringen Sie die Effekte nur so lange, bis sich bestimmte Abhängigkeiten geändert haben, wenn Sie den Hook
Effect
zur Verbesserung der Laufzeitleistung verwenden.