Data publikacji: 8 października 2025 r.
Duży DOM może wydłużać obliczenia stylów i układów, co wpływa na responsywność strony. Duży DOM zwiększa też wykorzystanie pamięci.
Głębokie drzewo DOM samo w sobie nie stanowi problemu z wydajnością, ale jest objawem wzorców projektowych, które wykorzystują niepotrzebne zagnieżdżanie elementów.
Ta statystyka uwzględnia cały DOM, w tym w korzeniach cienia. Ignoruje węzły DOM, które nie są też elementami. Ignoruje też zawartość <iframe>.
Na co zwrócić uwagę:
- Łączna liczba elementów: łączna liczba elementów w DOM strony.
- Głębokość DOM: maksymalna głębokość drzewa DOM.
- Maksymalna liczba elementów podrzędnych: element z największą liczbą elementów podrzędnych.
Jak przekazać tę statystykę
Ten wniosek jest generowany tylko wtedy, gdy występuje duże ponowne obliczanie układu lub stylu trwające ponad 40 ms.
- Duża aktualizacja układu obejmuje ponad 100 obiektów układu (czyli w przybliżeniu elementów).
- Duże ponowne obliczanie stylu obejmuje ponad 300 elementów.
W przypadku niepowodzenia w panelu Skuteczność ten wgląd wyróżnia te zdarzenia na wykresie płomieniowym.
Aby obniżyć koszt tych wydarzeń:
- Dowiedz się, jak mierzyć koszt selektorów CSS i zmniejszać złożoność stylów.
- Zminimalizuj głębokość DOM, ograniczając niepotrzebne zagnieżdżanie.
- Rozważ zastosowanie komponentów internetowych, aby używać Shadow DOM. Nie zmniejszy to rozmiaru DOM, ale obniży koszt ponownego obliczania stylów.
Wskazówki dotyczące konkretnych stosów
Ta informacja zawiera też wskazówki dotyczące stron korzystających z tych technologii:
Angular
Jeśli renderujesz duże listy, użyj przewijania wirtualnego z pakietem CDK (Component Dev Kit).
React
- Jeśli renderujesz na stronie wiele powtarzających się elementów, proponujemy wykorzystanie biblioteki „okienkowej”, takiej jak
react-window, aby zminimalizować liczbę tworzonych węzłów DOM. - Zredukuj liczbę ponownych renderowań za pomocą metod
shouldComponentUpdate,PureComponentlubReact.memo. - Pomijaj efekty tylko do momentu zmiany określonych zależności, jeśli używasz hooka
Effect, aby przyspieszyć działanie.
Dodatkowe odniesienia
- Kod źródłowy statystyk
- Jak duże rozmiary DOM wpływają na interaktywność i co można z tym zrobić
- Minimalizowanie przeformatowania w przeglądarce
- Statystyki selektora w Narzędziach deweloperskich w Chrome
- Unieważnienie stylu w Blinku
- Mierzenie czasu ponownego obliczania stylu w warunkach rzeczywistych