Übermäßige DOM-Größe vermeiden

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.
Lighthouse hebt übermäßig viele Details zur DOM-Größe hervor.

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 oder React.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.

Weitere Informationen