Veröffentlicht: 8. Oktober 2025
Ein großes DOM kann die Dauer von Stilberechnungen und Layouts verlängern und sich so auf die Reaktionsfähigkeit der Seite auswirken. Ein großes DOM führt auch zu einer höheren Arbeitsspeichernutzung.
Ein tiefer DOM-Baum ist an sich kein Leistungsproblem, aber ein Symptom für Designmuster, bei denen unnötige Elementverschachtelungen verwendet werden.
Bei dieser Analyse wird das gesamte DOM berücksichtigt, auch innerhalb von Shadow Roots. DOM-Knoten, die keine Elemente sind, werden ignoriert. Außerdem werden <iframe>-Inhalte ignoriert.
Darauf sollten Sie achten:
- Gesamtzahl der Elemente: Die Gesamtzahl der Elemente im DOM Ihrer Seite.
- DOM-Tiefe: Die maximale Tiefe des DOM-Baums.
- Die meisten untergeordneten Elemente: Das Element mit den meisten untergeordneten Elementen.
So geben Sie diese Information weiter
Dieser Insight schlägt nur fehl, wenn eine große Layout- oder Stilneuberechnung länger als 40 ms dauert.
- Ein umfassendes Layout-Update umfasst über 100 Layout-Objekte (die in etwa Elementen entsprechen).
- Eine umfangreiche Stilneuberechnung betrifft mehr als 300 Elemente.
Bei einem Fehler werden diese Ereignisse im Leistungsbereich im Flammenchart hervorgehoben.
So senken Sie die Kosten für diese Ereignisse:
- Informationen zum Messen der Kosten von CSS-Selektoren und zum Reduzieren der Stilkomplexität
- Minimieren Sie die Tiefe des DOM, indem Sie unnötige Verschachtelungen reduzieren.
- Sie können Web Components verwenden, um das Shadow DOM zu nutzen. Dadurch wird die DOM-Größe zwar nicht reduziert, aber die Kosten für Stil-Neuberechnungen sinken.
Stack-spezifische Anleitung
Diese Insight-Meldung enthält auch stack-spezifische Anleitungen für Seiten, auf denen die folgenden Technologien verwendet werden:
Angular
Wenn Sie umfangreiche Listen rendern, verwenden Sie virtuelles Scrolling mit dem Component Dev Kit (CDK).
React
- Verwenden Sie eine Bibliothek wie
react-windowzur Fensterverwaltung, um die Anzahl an DOM-Knoten zu minimieren, die beim Rendern vieler sich wiederholender Elemente auf der Seite erstellt werden. - Sie können
shouldComponentUpdate,PureComponentoderReact.memonutzen, um wiederholtes Rendern auf ein Mindestmaß zu reduzieren. - Effekte überspringen
Sie können
Effectnutzen, um wiederholtes Rendern auf ein Mindestmaß zu reduzieren, und außerdem Effekte überspringen, aber nur, bis sich bestimmte Abhängigkeiten geändert haben (sofern Sie denEffect-Hook zur Verbesserung der Laufzeitleistung verwenden).