DOM (obiektowy model dokumentu) to ogólna nazwa struktury drzewiastej znaczników HTML. Jego wpływ na szybkość strony jest taki, że im bardziej złożona jest struktura HTML podczas renderowania strony, tym wolniej będzie ona działać.
Według Lighthouse złożoność Strukturę DOM mierzy się za pomocą trzech wskaźników. Aby zapewnić tym metrykom ich punkty odniesienia:
- Całkowita liczba tagów powinna wynosić mniej niż 1500
- Maksymalna głębokość tagu powinna wynosić mniej niż 32
- Maksymalna liczba tagów podrzędnych powinna wynosić mniej niż 60
W powyższym przykładzie całkowita liczba tagów jest niska, maksymalna głębokość tagów jest dobra, ale maksymalna liczba tagów podrzędnych jest niska.
Optymalizacja elementów DOM leży całkowicie w gestii interesariusza frontendu. Każdy znacznik wybrany losowo lub arbitralnie podczas tworzenia kodu strony ma koszt po zakończeniu projektu. Dlatego wszystkich frontend developerów zapraszamy na chwilę ciszy i otwarcia oczu.
Punkty, w których zawyżony DOM negatywnie wpływa na wydajność strony, obejmują:
- Wystąpią strony z dużą liczbą węzłów (tagów). przeciążenie sieci i trudności z ładowaniem ze względu na ich duży rozmiar, zwiększając w ten sposób TTFB (czas do pierwszego bajtu).
- Renderowanie załadowanych węzłów do utworzenia ich pozycje i style wymagają czasu, zwiększając w ten sposób FCP (First Contentful Paint).
- Wraz ze wzrostem liczby węzłów konieczne jest obciążenie Manipulacje JavaScriptem obciążają pamięć, zwiększając TFT (czas do interaktywności).
Aby zilustrować optymalizację DOM na bardzo prostym przykładzie, rozważ następujące kwestie, w których zmniejsza się zarówno liczba, jak i głębokość DOM:
<div id="nav-element">
<ul>
</ul>
</div>Zamiast to robić:
<ul id="nav-element">
</ul>
Należy to zrobić: Dwie najbardziej zalecane metody zmniejszania rozmiaru DOM to leniwe ładowanie i paginacja. Ponieważ struktury kart na stronach z listami zawierają dużo DOM, sugerowane jest nieskończone przewijanie lub paginacja. Decydując się na liczbę pozycji w paginacji, zdecydowanie należy wziąć pod uwagę kryteria pomiaru DOM. Czas zwykle brany pod uwagę ilość produktów w paginacji wynosi 15-20 sekund, ale tę część należy w rzeczywistości obliczyć po stronie interesariusza frontendu, biorąc pod uwagę rozmiar DOM.
Jednym z bardzo prostych rozwiązań jest nie dodawanie elementów które nie są widoczne na stronie do kodu HTML bez ukrywania ich za pomocą CSS. Jeśli element wymaga wyświetlenia, należy go później wywołać i pokazać użytkownikowi. Powinieneś mieć świadomość, że ukrywanie elementów za pomocą CSS powiększa DOM.
Źródła:
