Szybkość Średni wpływ Średnie zależnie od przyczyny

Rozmiar DOM

Zbyt wiele elementów HTML spowalnia renderowanie.

Co to jest

DOM to drzewo elementów HTML strony. Zbyt duży lub głęboko zagnieżdżony DOM (tysiące węzłów) spowalnia renderowanie, układ i operacje JavaScript.

Dlaczego warto to rozwiązać

Duży DOM zwiększa zużycie pamięci i procesora, pogarsza interaktywność i płynność, głównie na telefonach. Bywa objawem rozrośniętych szablonów lub nadmiarowych otoczek.

Jak to zrobić

1Uprość strukturę, usuń zbędne otoczki <div>.
2Przy długich listach/tabelach użyj stronicowania lub wirtualizacji.
3Nie wczytuj ukrytej treści, która nie jest potrzebna (renderuj dopiero na żądanie).

Podsumowanie

Szczupły DOM szybciej się renderuje i obsługuje. Orientacyjnie utrzymuj liczbę węzłów w granicach niskich tysięcy i unikaj głębokiego zagnieżdżenia. Przy stronach bogatych w dane pomaga wirtualizacja list.

Powiązane tematy