Autodesk / Autodesk/react-base-table

Heavy Recalculate style stack in performance on scroll

未关闭
#415 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
1.5k
派生
170
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

调研方向

未指定源文件或测试。首先使用 React 18 重现大表格滚动,并记录 Chrome 的 Performance 面板,然后将 Recalculate Style 和 forced-reflow 条目追踪到 react-base-table 中。完成的要求是确定原因,并证明滚动不再产生报告中的 50ms+ 样式处理开销。

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
frontend, performance
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。