Das Problem beim Rendern großer Listen

Angenommen, Sie iterieren über ein Array mit zehntausend Elementen und rendern für jedes ein li. React erstellt gewissenhaft zehntausend DOM-Knoten, obwohl gleichzeitig nur etwa zwei Dutzend auf den Bildschirm passen.

Die meisten dieser Knoten liegen außerhalb des sichtbaren Bereichs und sind unsichtbar. Trotzdem muss der Browser jeden einzelnen erstellen, layouten und verwalten.

Große DOM-Bäume verursachen für den Browser erhebliche Kosten. Layout, Neuberechnung von Styles und Speicherbedarf steigen mit der Anzahl der Knoten. Eine riesige Liste verlangsamt daher das initiale Rendern und erhöht den Speicherverbrauch.

Selbst einfache Interaktionen können ruckeln, wenn die Engine Zehntausende von Knoten verfolgen und neu layouten muss.

Beim Scrollen einer riesigen Liste spüren Benutzer die Auswirkungen am deutlichsten. Der Browser zeichnet Inhalte möglicherweise neu und berechnet das Layout neu, während sich der Inhalt bewegt. Bei zu vielen Knoten sinkt die Bildrate unter ein flüssiges Niveau.

Das Ergebnis ist ruckeliges und verzögertes Scrollen, wodurch sich die Oberfläche unabhängig von der Geschwindigkeit der übrigen App unresponsiv anfühlt.

Sie können das Problem im Memory-Panel der Browser-DevTools bestätigen, das die Anzahl der DOM-Knoten auf der Seite anzeigt. Eine Liste, die Tausende von Knoten erstellt, ist hier deutlich zu erkennen.

Wenn Sie beobachten, wie diese Anzahl beim Rendern weiterer Elemente anwächst, erhalten Sie einen konkreten Beleg dafür, dass die DOM-Größe den Engpass bildet.

Virtualisierung, manchmal auch Windowing genannt, rendert statt der gesamten Liste nur die aktuell sichtbaren Elemente sowie einen kleinen Puffer. Beim Scrollen werden Elemente, die in den sichtbaren Bereich gelangen, gemountet, und Elemente, die ihn verlassen, werden unmountet.

Dadurch bleibt das aktive DOM unabhängig von der Anzahl der Datenelemente klein, sodass DOM-Größe und Dataset-Größe voneinander entkoppelt werden.

Das sichtbare Fenster ergibt sich aus der Scrollposition, der Höhe des Containers und der Elementhöhe. Wenn Sie die Höhe des Viewports durch die Elementhöhe teilen, erhalten Sie ungefähr die Anzahl der sichtbaren Zeilen. Der Scrolloffset zeigt, um welche Zeilen es sich handelt.

Die Bibliothek verwendet diese Werte, um jederzeit genau den Slice der Elemente zu bestimmen, der gerendert werden soll.

Mehrere Bibliotheken implementieren Windowing. react-virtualized bietet viele Funktionen, ist aber größer. react-window ist eine kleinere, fokussierte Neuentwicklung desselben Autors, und TanStack Virtual ist eine moderne Headless-Option.

Für die meisten Listen bietet react-window ein hervorragendes Gleichgewicht aus Einfachheit und Performance, weshalb sich dieser Kurs darauf konzentriert.

Virtualisierung lohnt sich bei langen Listen, grob ab mehreren hundert Zeilen, oder wenn die Zeilen viele Bilder und verschachtelte Komponenten enthalten. In diesen Fällen wirkt sich die DOM-Größe tatsächlich negativ aus.

Endlos-Feeds, große Datentabellen und Chatverläufe sind typische Szenarien, in denen Windowing unverzichtbar und nicht nur optional ist.

Bei kurzen Listen mit einigen Dutzend einfachen Elementen erhöht Virtualisierung die Komplexität ohne nennenswerten Nutzen. Der Aufwand für absolute Positionierung und Messung kann sich sogar negativ auf die Gesamtperformance auswirken.

Verwenden Sie Windowing nur für tatsächlich große Datasets. Bei kleinen Datasets ist ein einfaches map übersichtlicher und vollkommen schnell genug.

Mit Windowing behält eine Liste mit hunderttausend Elementen nur die wenigen sichtbaren Elemente im DOM. Dadurch ist das initiale Rendern schnell, der Speicherverbrauch bleibt niedrig und das Scrollen läuft flüssig.

Sie nehmen beim Einrichten etwas zusätzliche Komplexität in Kauf und erhalten dafür eine Performance, die nicht mehr von der Datenmenge abhängt. Genau das ist das zentrale Versprechen der Virtualisierung.

Das Rendern Tausender von DOM-Knoten erhöht die Layoutkosten und den Speicherverbrauch und führt zu ruckeligem Scrollen. Dies können Sie anhand der Knotenanzahl in den DevTools bestätigen. Virtualisierung rendert nur das sichtbare Fenster sowie einen Puffer und hält dadurch das DOM klein.

react-window ist unter react-virtualized und TanStack Virtual eine fokussierte und leichtgewichtige Wahl. Verwenden Sie es für große oder aufwendige Listen und verzichten Sie bei kurzen, einfachen Listen darauf.