Unikaj nadmiernego rozmiaru DOM

Duże drzewo DOM może spowalniać działanie strony na kilka sposobów:

• Wydajność sieci i równoważenie obciążenia

  Duże drzewo DOM często zawiera wiele węzłów, które nie są widoczne, gdy użytkownik po raz pierwszy wczytuje stronę. To zbędnie zwiększa koszty danych pobieranych przez użytkowników i wydłuża czas wczytywania.

• Wydajność w czasie działania

  Gdy użytkownicy i skrypty wchodzą w interakcję ze stroną, przeglądarka musi stale przeliczać pozycję i styl elementów węzła. Duże drzewo DOM w połączeniu ze skomplikowanymi regułami stylów może znacznie spowolnić renderowanie i interaktywność.

• Wydajność pamięci

  Jeśli Twój kod JavaScript używa ogólnych selektorów zapytań, takich jak document.querySelectorAll('li'), możesz nieświadomie przechowywać odwołania do bardzo dużej liczby węzłów, co może przeciążyć pamięć urządzeń użytkowników.

Dlaczego audyt rozmiaru DOM w Lighthouse kończy się niepowodzeniem

Lighthouse podaje łączną liczbę elementów DOM strony, maksymalną głębokość DOM strony oraz maksymalną liczbę jej elementów podrzędnych:

Lighthouse oznacza strony z drzewami DOM, które:

• Ostrzega, gdy element body zawiera ponad 800 węzłów.
• Błędy,gdy element body zawiera ponad 1400 węzłów.

Jak zoptymalizować rozmiar DOM

Zazwyczaj szukaj sposobów na tworzenie węzłów DOM tylko wtedy, gdy jest to konieczne, oraz usuwaj węzły, gdy nie są już potrzebne.

Jeśli wysyłasz dużą strukturę DOM, spróbuj załadować stronę i ręcznie sprawdzić, które węzły są wyświetlane. Możesz usunąć z początkowo wczytanego dokumentu niewyświetlane węzły i tworzyć je dopiero po odpowiedniej interakcji użytkownika, takiej jak przewijanie lub kliknięcie przycisku.

Jeśli węzły DOM tworzysz w czasie wykonywania, punkty zmiany w DOM związane z modyfikacją poddrzewa mogą Ci pomóc określić, kiedy węzły są tworzone.

Jeśli nie da się uniknąć dużego drzewa DOM, inną metodą poprawy wydajności renderowania jest uproszczenie selektorów arkusza CSS. Więcej informacji znajdziesz w artykule Zmniejszanie zakresu i złożoności obliczeń stylów.

Więcej informacji znajdziesz w artykule Wpływ rozmiaru interfejsu DOM na interaktywność i sposoby na rozwiązanie tego problemu.

Wskazówki dotyczące poszczególnych zbiorów

Angular

Jeśli renderujesz duże listy, użyj przewijania wirtualnego z pakietu 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.
• Zminimalizuj niepotrzebne ponowne renderowanie za pomocą narzędzi shouldComponentUpdate, PureComponent lub React.memo.
• Pomijaj efekty tylko do momentu zmiany określonych zależności, jeśli używasz hooka Effect do poprawy wydajności w czasie wykonywania.

Zasoby

• Kod źródłowy dotyczący kontroli Unikania nadmiernego rozmiaru DOM
• Ograniczanie zakresu i złożoności obliczeń stylów