Duże drzewo DOM może spowolnić działanie strony na wiele sposobów:
Wydajność sieci i wydajność obciążenia
Duże drzewo DOM często zawiera wiele węzłów, które są niewidoczne, gdy użytkownik po raz pierwszy wczytuje stronę, co niepotrzebnie zwiększa koszty danych ponoszonych przez użytkowników i spowalnia wczytywanie.
Wydajność środowiska wykonawczego
Gdy użytkownicy i skrypty wchodzą w interakcję z Twoją stroną, przeglądarka musi stale ponownie obliczać położenie i styl węzłów. Duże drzewo DOM w połączeniu ze skomplikowanymi regułami dotyczącymi stylu może znacznie spowolnić renderowanie.
Wydajność pamięci
Jeśli w swoim kodzie JavaScript używasz 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ć możliwości pamięci urządzeń użytkowników.
Co się dzieje, gdy kontrola rozmiaru DOM Lighthouse kończy się niepowodzeniem
Lighthouse podaje w raporcie łączną liczbę elementów DOM strony, maksymalną głębokość DOM i maksymalną liczbę elementów podrzędnych:
Lighthouse oznacza strony z drzewami DOM, które:
- Ostrzega, gdy element treści ma ponad 800 węzłów.
- Błędy,gdy element treści ma więcej niż około 1400 węzłów.
Jak zoptymalizować rozmiar DOM
Ogólnie rzecz biorąc, szukaj sposobów na tworzenie węzłów DOM tylko wtedy, gdy to konieczne, i niszczenie węzłów, gdy nie są już potrzebne.
Jeśli obecnie wysyłasz duże drzewo DOM, wczytaj swoją stronę i ręcznie sprawdź, które węzły są wyświetlane. Być może można usunąć niewyświetlone węzły z początkowo wczytanego dokumentu i utworzyć je dopiero po odpowiedniej interakcji użytkownika, np. przewinięciu strony czy kliknięciu przycisku.
Jeśli węzły DOM tworzysz w czasie działania, punkty przerwania zmiany DOM modyfikacji poddrzewa mogą pomóc Ci określić, kiedy węzły są tworzone.
Jeśli nie możesz uniknąć dużego drzewa DOM, możesz też uprościć selektory CSS. Więcej informacji znajdziesz w naszym poradniku Zmniejszanie zakresu i złożoności obliczeń stylu.
Wskazówki dotyczące stosu
Angular
Jeśli renderujesz duże listy, użyj przewijania wirtualnego za pomocą pakietu CDK (Komponent dla programistów).
Dodaj reakcję
- Jeśli renderujesz na stronie wiele powtarzających się elementów, użyj biblioteki „okienna”, takiej jak
react-window, aby zminimalizować liczbę węzłów DOM. - Zminimalizuj niepotrzebne ponowne renderowanie za pomocą tagów
shouldComponentUpdate,PureComponentlubReact.memo. - Jeśli do zwiększenia wydajności środowiska wykonawczego używasz webhooka
Effect, pomijaj efekty tylko do momentu, gdy określone zależności się zmienią.