Autodesk / Autodesk/react-base-table

Heavy Recalculate style stack in performance on scroll

Offen
#415 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
1.5k
Forks
170
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

We are using react-base-table in our tables, the scroll virtualised performance seems laggy.
The "Recalculate Style" stack in Chrome performance tab reaches 50ms+, for unknown reason.
Chrome also shows "Forced reflow" warning in console and in the Performance tab.
Using react/react-dom v18.
Any way to overcome/debug the issue?
Screenshot 2023-05-17 at 5 28 22 PM

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Es werden keine Quelldateien oder Tests genannt. Beginne damit, das Scrollen durch eine große Tabelle mit React 18 zu reproduzieren und dabei das Performance-Panel von Chrome aufzuzeichnen, und verfolge anschließend die Einträge für Recalculate Style und erzwungenes Reflow bis in react-base-table. Als erledigt gilt die Aufgabe, wenn die Ursache identifiziert wurde und nachgewiesen ist, dass das Scrollen nicht mehr die gemeldete Style-Arbeit von 50ms+ verursacht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.