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

Eine große DOM-Struktur kann die Seitenleistung auf verschiedene Weise verlangsamen:

  • Netzwerkeffizienz und Lastleistung

    Ein großer DOM-Baum enthält oft viele Knoten, die nicht sichtbar sind, wenn der Nutzer die Seite zum ersten Mal lädt. Dies erhöht unnötig die Datenkosten für Ihre Nutzer und verlangsamt die Ladezeit.

  • Laufzeitleistung

    Wenn Nutzer und Skripts mit Ihrer Seite interagieren, muss der Browser ständig die Position und den Stil der Knoten neu berechnen. Eine große DOM-Baumstruktur in Kombination mit komplizierten Stilregeln kann das Rendering erheblich verlangsamen.

  • Arbeitsspeicherleistung

    Wenn Ihr JavaScript allgemeine Abfrageselektoren wie document.querySelectorAll('li') verwendet, 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 Gesamtzahl der DOM-Elemente für eine Seite, die maximale DOM-Tiefe der Seite und die maximale Anzahl untergeordneter Elemente:

Screenshot des Lighthouse-Audits zur Vermeidung einer übermäßigen DOM-Größe

Lighthouse meldet Seiten mit DOM-Baumstrukturen, die:

  • Sie werden benachrichtigt, wenn das Textelement 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 löschen, wenn sie nicht mehr benötigt werden.

Wenn Sie derzeit einen großen DOM-Baum versenden, laden Sie Ihre Seite und notieren Sie manuell, welche Knoten angezeigt werden. Vielleicht können Sie die nicht angezeigten Knoten aus dem ursprünglich geladenen Dokument entfernen und erst nach einer relevanten Nutzerinteraktion erstellen, z. B. nach einem Scrollen oder einem Klick auf eine Schaltfläche.

Wenn Sie zur Laufzeit DOM-Knoten erstellen, können Sie mit Haltepunkten zur Unterstrukturänderung DOM-Änderungshaltepunkte genau bestimmen, wann Knoten erstellt werden.

Wenn sich eine große DOM-Baumstruktur nicht vermeiden lässt, können Sie auch Ihre CSS-Selektoren vereinfachen, um die Rendering-Leistung zu verbessern. Weitere Informationen finden Sie unter Reduce the Scope and Complexity of Style Calculations.

Stackspezifische Anleitung

Angular

Wenn Sie große Listen rendern, verwenden Sie das virtuelle Scrollen mit dem Component Dev Kit (CDK).

Reagieren

  • Verwenden Sie eine Fensterbibliothek wie react-window, um die Anzahl der DOM-Knoten zu minimieren, die erstellt werden, wenn Sie viele wiederkehrende Elemente auf der Seite rendern.
  • Minimieren Sie unnötige erneute Renderings mit shouldComponentUpdate, PureComponent oder React.memo.
  • Überspringen Sie Effekte nur so lange, bis sich bestimmte Abhängigkeiten geändert haben, wenn Sie den Effect-Hook zur Verbesserung der Laufzeitleistung verwenden.

Ressourcen