Problem renderowania dużych list

Załóżmy, że iteruje się po tablicy dziesięciu tysięcy elementów i renderuje element li dla każdego z nich. React skrupulatnie utworzy dziesięć tysięcy węzłów DOM, mimo że jednocześnie na ekranie mieści się zaledwie kilkadziesiąt.

Większość tych węzłów znajduje się poza ekranem i jest niewidoczna, jednak przeglądarka nadal musi je wszystkie utworzyć, obliczyć ich układ i utrzymywać.

Duże drzewa DOM wiążą się dla przeglądarki z realnym kosztem. Układ, ponowne obliczanie stylów i zużycie pamięci rosną wraz z liczbą węzłów, dlatego ogromna lista spowalnia początkowe renderowanie i zwiększa zużycie pamięci.

Nawet proste interakcje mogą się zacinać, gdy silnik musi śledzić i ponownie obliczać układ dziesiątek tysięcy węzłów.

To właśnie podczas przewijania ogromnej listy użytkownicy odczuwają problem najbardziej. Przeglądarka ponownie rysuje zawartość i może ponownie obliczać układ, gdy zawartość się przesuwa, a przy zbyt dużej liczbie węzłów liczba klatek spada poniżej poziomu zapewniającego płynność.

Rezultatem jest szarpane, opóźnione przewijanie, przez które interfejs wydaje się nie reagować, niezależnie od tego, jak szybko działa reszta aplikacji.

Problem można potwierdzić w panelu Memory narzędzi deweloperskich przeglądarki, który pokazuje liczbę węzłów DOM na stronie. Lista tworząca tysiące węzłów jest tam wyraźnie widoczna.

Obserwowanie, jak liczba ta rośnie podczas renderowania kolejnych elementów, dostarcza konkretnych dowodów na to, że wąskim gardłem jest rozmiar DOM.

Wirtualizacja, nazywana czasem okienkowaniem, renderuje tylko aktualnie widoczne elementy wraz z niewielkim buforem, zamiast całej listy. Podczas przewijania elementy wchodzące w obszar widoczny są montowane, a te, które go opuszczają, są odmontowywane.

Dzięki temu aktywny DOM pozostaje niewielki niezależnie od liczby elementów w danych, a jego rozmiar zostaje uniezależniony od rozmiaru zbioru danych.

Widoczne okno wyznacza się na podstawie pozycji przewijania, wysokości kontenera i wysokości elementu. Podzielenie wysokości obszaru widoku przez wysokość elementu daje przybliżoną liczbę mieszczących się wierszy, a przesunięcie przewijania wskazuje, które to wiersze.

Biblioteka używa tych wartości, aby w każdej chwili dokładnie określić, jaki fragment elementów należy wyrenderować.

Istnieje kilka bibliotek implementujących okienkowanie. react-virtualized jest rozbudowana i oferuje wiele funkcji, ale jest większa, react-window to mniejsza, ukierunkowana wersja napisana przez tego samego autora, a TanStack Virtual to nowoczesna opcja headless.

W przypadku większości list react-window zapewnia doskonały kompromis między prostotą a wydajnością, dlatego właśnie na niej skupia się ten kurs.

Wirtualizacja przynosi korzyści w przypadku długich list, zwykle liczących kilkaset wierszy lub więcej, albo gdy wiersze zawierają dużo obrazów i zagnieżdżonych komponentów. To sytuacje, w których rozmiar DOM rzeczywiście negatywnie wpływa na działanie aplikacji.

Nieskończone strumienie danych, duże tabele danych i historie czatów to typowe scenariusze, w których okienkowanie staje się niezbędne, a nie opcjonalne.

W przypadku krótkich list zawierających kilkadziesiąt prostych elementów wirtualizacja zwiększa złożoność bez wymiernych korzyści. Narzut związany z pozycjonowaniem absolutnym i pomiarem może nawet przynieść stratę netto.

Okienkowanie warto rezerwować dla rzeczywiście dużych zbiorów danych; w przypadku małych zwykłe mapowanie jest prostsze i wystarczająco szybkie.

Dzięki okienkowaniu lista licząca sto tysięcy elementów przechowuje w DOM tylko kilka widocznych elementów, dlatego początkowe renderowanie jest szybkie, zużycie pamięci pozostaje niskie, a przewijanie jest płynne.

W zamian za odrobinę większą złożoność konfiguracji otrzymuje się wydajność, która nie zależy już od ilości danych. To właśnie jest główna obietnica wirtualizacji.

Ustal, kiedy wirtualizacja się opłaca.

Renderowanie tysięcy węzłów DOM zwiększa koszt obliczania układu i zużycie pamięci oraz powoduje szarpanie podczas przewijania. Problem ten można potwierdzić, sprawdzając liczbę węzłów w DevTools. Wirtualizacja renderuje tylko widoczne okno wraz z buforem, dzięki czemu DOM pozostaje niewielki.

react-window to ukierunkowana, lekka opcja spośród react-virtualized i TanStack Virtual. Należy używać jej w przypadku dużych lub ciężkich list, a pomijać przy krótkich i prostych.