Ich habe eine Liste mit mehreren tausend Produkten, und beim Scrollen fängt die Anwendung an, stark zu laggen. Ich habe normale Virtualisierung probiert, aber das hilft nicht wirklich. Vielleicht gibt es einen modernen Ansatz, den ich übersehen habe?
Hast du die Anwendung überhaupt profiliert, oder rätst du da ins Blaue hinein? Denn wenn Virtualisierung nicht hilft, dann lag das Problem wahrscheinlich daran, dass du die ganze Liste bei jeder State-Änderung neu renderst - selbst wenn nur 20 Elemente sichtbar sind, kann React Daten für alle 5000 neu berechnen. Versuch, deine Zeilenkomponenten in `React.memo` zu wrappen, und stell sicher, dass du bei jedem Render keine neuen Event-Handler erstellst (benutze `useCallback`).
Vergiss zunächst die Standard-Virtualisierung, wenn sie nicht hilft - dann liegt das Problem wahrscheinlich nicht am Rendering, sondern daran, dass du zu viele Daten auf einmal lädt oder sie bei jedem Scroll neu berechnest. Überprüf, ob du `memo`, `useMemo` und `useCallback` richtig einsetzt - oft werden Komponenten grundlos neu berechnet. Hilfreich ist auch, die App mit dem React DevTools Profiler zu analysieren, um zu sehen, wo genau der Engpass sitzt: Vielleicht ist es das Rendering der Liste selbst, oder vielleicht schickst du bei jedem Scroll Anfragen an den Server oder berechnest komplexe Logik neu.
Falls Virtualisierung bereits im Einsatz ist, versuch, das Render-Fenster zu vergrößern (overscan), oder stell auf Pagination um statt auf unendliches Scrollen - manchmal ist das einfach einfacher und schneller.
Schau dir die Memoization von Selektoren und Callback-Funktionen an - oft kommen die Lags gar nicht vom Rendering selbst, sondern davon, dass bei jedem Scroll die Filter neu berechnet werden, die Sortierung aktualisiert wird oder neue Funktionen für die Event-Handler erstellt werden! Versuche, die Selektoren in `useSelector` mit dem richtigen Vergleich zu wrappen oder nutze `useMemo` für Berechnungen - das kann dir einen viel größeren Performance-Gewinn bringen als nur Virtualisierung.
Überprüf, wie viele data-Attribute und Klassen du auf jedes Listenelement setzt. Oft kommen die Lags nicht von der Anzahl der DOM-Knoten, sondern davon, dass der Browser ständig Stile und Layout neu berechnet, weil sich beim Scrollen Klassen ändern. Wenn du dynamisch Klassen für das aktive Element oder Hover hinzufügst, kann das zum Bottleneck werden. Versuch, das in CSS mit `nth-child` oder einer separaten Ebene via `position: fixed` zu lösen, damit der Browser die Hauptliste nicht anfasst.
Zweiter Punkt - stell sicher, dass du nicht bei jedem Render neue Objekte in den Props erstellst. Wenn du zum Beispiel `style={{ color: item.color }}` weitergibst statt eines vorberechneten Werts, sieht React unterschiedliche Objekte und berechnet die Komponente neu. Selbst mit Memoization kann das langsam werden. Besser, die Stile vorher vorbereiten oder CSS-Variablen nutzen.
Und noch eins: Wenn die Liste Tausende Elemente hat, kann selbst Virtualisierung langsam sein, wenn du zu viele DOM-Knoten gleichzeitig im Viewport erstellst. Versuch, die Anzahl der gerenderten Reihen auf einmal zu reduzieren - zeig nur den sichtbaren Teil plus einen kleinen Buffer oben und unten. Bei den meisten Virtualisierungsbibliotheken lässt sich das über einen Parameter wie `overscanRowCount` einstellen.
Virtualisierung funktioniert normalerweise tatsächlich einwandfrei, wenn sie wirklich beim Rendern hilft - dann kommen die Lags von woanders her. Ein häufiger Fehler, den viele übersehen: Du könntest ein Problem mit unendlichem Scrollen und Datenladen haben. Wenn du bei jedem Scroll eine neue Portion Produkte vom Backend anforderst und die Ergebnisse nicht cachst, laggt der Browser nicht wegen der DOM-Knoten, sondern wegen Netzwerkverzögerungen und JSON-Parsing.
Das Zweite, das du überprüfen solltest - hast du die Virtualisierungsgrößen richtig konfiguriert? Oft stellen Leute eine viel zu kleine Elementhöhe in der Config ein, und die Bibliothek wie react-window fängt an, die sichtbaren Elemente praktisch bei jedem Pixel des Scrolls neu zu berechnen. Versuche, den Buffer zu vergrößern und die Zeilenhöhe explizit anzugeben, statt dich auf die automatische Berechnung zu verlassen.
Anmeldenzum Beantworten.
