Unikaj nadmiernego rozmiaru DOM

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

• Wydajność sieci i obciążenie

  Duże drzewo DOM często zawiera wiele węzłów, które nie są widoczne, gdy użytkownik po raz pierwszy wczytuje stronę. Niepotrzebnie zwiększa to koszty danych 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 ponownie obliczać pozycję i styl węzłów. 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.

Jak nie zaliczyć audytu Lighthouse dotyczącego rozmiaru DOM

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

Lighthouse oznacza strony z drzewami DOM, które:

• Ostrzega, gdy element body ma więcej niż około 800 węzłów.
• Błędy,gdy element body ma więcej niż około 1400 węzłów.

Jak optymalizować rozmiar DOM

Ogólnie rzecz biorąc, staraj się tworzyć węzły DOM tylko wtedy, gdy są potrzebne, i usuwać je, gdy przestają być potrzebne.

Jeśli wysyłasz duże drzewo DOM, spróbuj wczytać stronę i ręcznie zanotować, które węzły są wyświetlane. Możesz usunąć niewyświetlane węzły z początkowo wczytanego dokumentu i utworzyć je dopiero po odpowiedniej interakcji użytkownika, np. przewinięciu lub kliknięciu przycisku.

Jeśli tworzysz węzły DOM w czasie działania programu, punkty przerwania zmian DOM w poddrzewie mogą pomóc Ci określić, kiedy węzły są tworzone.

Jeśli nie możesz uniknąć dużego drzewa DOM, innym sposobem na poprawę wydajności renderowania jest uproszczenie selektorów CSS. Więcej informacji znajdziesz w artykule Google Ograniczanie zakresu i złożoności obliczeń stylów.

Więcej informacji znajdziesz w artykule Jak duże rozmiary DOM wpływają na interaktywność i co można z tym zrobić.

Wskazówki dotyczące konkretnych stosów

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, PureComponent lub React.memo.
• Pomijaj efekty tylko do momentu zmiany określonych zależności, jeśli używasz hooka Effect, aby przyspieszyć działanie.

Zasoby

• Kod źródłowy audytu Unikaj nadmiernego rozmiaru DOM
• Ograniczanie zakresu i złożoności obliczeń stylów