Duże drzewo DOM może spowalniać działanie strony na kilka sposobów:
Wydajność sieci i wydajność obciążenia
Duże drzewo DOM zawiera często wiele węzłów niewidocznych, gdy użytkownik po raz pierwszy wczytuje stronę, co niepotrzebnie zwiększa koszty przesyłania danych dla użytkowników i spowalnia czas wczytywania.
Wydajność środowiska wykonawczego
Podczas interakcji użytkowników i skryptów ze stroną przeglądarka musi nieustannie ponownie obliczać położenie i styl węzłów. Duże drzewo DOM w połączeniu ze skomplikowanymi regułami stylu może znacznie spowolnić renderowanie.
Wydajność pamięci
Jeśli w Twoim JavaScripcie są używane ogólne selektory zapytań, takie 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.
Dlaczego kontrola rozmiaru DOM w Lighthouse kończy się niepowodzeniem
Lighthouse podaje łączną liczbę elementów DOM strony, jej maksymalną głębokość DOM oraz maksymalną liczbę elementów podrzędnych:
Lighthouse oznacza strony z drzewami DOM, które:
- Ostrzeżenie jest wyświetlane, gdy element body ma więcej niż ok. 800 węzłów.
- Błędy,gdy element ma więcej niż 1400 węzłów.
Jak zoptymalizować rozmiar DOM
Ogólnie staraj się tworzyć węzły DOM tylko wtedy, gdy są potrzebne, i niszczyć je, gdy już nie są potrzebne.
Jeśli wysyłasz duże drzewo DOM, wczytaj stronę i ręcznie sprawdź, które węzły są wyświetlane. Być może możesz usunąć niewyświetlone węzły z początkowo wczytanego dokumentu i utworzyć je dopiero po odpowiedniej interakcji z użytkownikiem, np. przewinięciu strony lub kliknięciu przycisku.
Jeśli tworzysz węzły DOM w czasie działania, punkty przerwania zmian DOM modyfikacji drzewa podrzędnego mogą pomóc Ci określić moment tworzenia węzłów.
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 dużych rozmiarów DOM na interaktywność i co możesz zrobić w takiej sytuacji.
Wskazówki dotyczące stosu
Angular
Jeśli renderujesz duże listy, użyj przewijania wirtualnego za pomocą pakietu CDK (Komponent Dev Kit).
Dodaj reakcję
- Jeśli renderujesz na stronie wiele powtarzających się elementów, użyj biblioteki „okienkowej”, takiej jak
react-window, aby zminimalizować liczbę węzłów DOM. - Zminimalizuj niepotrzebne ponowne renderowanie za pomocą narzędzi
shouldComponentUpdate,PureComponentlubReact.memo. - Pomijaj efekty tylko do momentu zmiany określonych zależności, jeśli korzystasz z haczyka
Effect, aby zwiększyć wydajność środowiska wykonawczego.