Fixed-header tables force one getBoundingClientRect per column on every mount (ResizeObserver-driven MeasureCell)
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 42/100
- Issue 类型
- 缺陷
- 描述清晰度
- 需要澄清
- 活跃度
- 冷清
- 技术栈
- react, typescript
- 领域
- frontend, performance
调研方向
从 Body/MeasureCell.js 和 useResizeObserver.js:20 开始,然后复现一个使用 scroll.y 的固定表头表格,并按描述对其 cold mount 进行性能分析。完成标准是确定按列读取是否出于有意,并在不改变观察到的表格行为的情况下,找出或实现成本更低的测量路径。
由索引模型根据 Issue 内容生成。
描述
Environment
@rc-component/table: 1.10.4 (viaantd6.5.3)@rc-component/resize-observer: 1.1.2- Chrome, production build, 4x CPU throttle (DevTools)
What we observed
Any table mounted with a fixed/scrollable header (scroll.y set, i.e. fixHeader true) renders a hidden "measure row" with one MeasureCell per column. Each MeasureCell wraps its cell in a ResizeObserver (Body/MeasureCell.js), and on the initial observe, onInternalResize (useResizeObserver.js:20) calls target.getBoundingClientRect() once per cell.
On a ~40-column table, we measured 86 getBoundingClientRect calls totaling ~547ms of forced-layout self-time on a single cold mount, instrumented by wrapping HTMLElement.prototype.getBoundingClientRect/offsetWidth and measuring with performance.now(). This is currently the dominant forced-layout cost on table mount in our app (a general-purpose ERP list view), well above what column count alone would suggest — the reads don't appear to be batched into a single reflow.
Question / ask
Is per-column ResizeObserver-driven measurement (as opposed to reading all column offsetWidths in one synchronous batch, which the browser can usually satisfy with a single layout pass) intentional, or is there a lower-cost path we're missing (e.g. skipping remeasurement when explicit pixel widths are already provided for every column)? Happy to share a minimal repro or profiling trace if useful.
- 主要语言
- TypeScript
- 星标
- 1.4k
- 派生
- 618
- 平均合并
- 10 小时 19 分钟
- 30 天内合并 PR
- 2
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
react-component/table 的其他 Issue
-
难度 3/5 1-2 天 新手友好度 50/100
react-component/table#1416 ·
-
难度 5/5 一周以上 新手友好度 30/100
react-component/table#1403 ·
-
难度 5/5 一周以上 新手友好度 15/100
react-component/table#1269 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 35/100
react-component/table#1257 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 45/100
react-component/table#1228 ·
查看 react-component/table 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 70/100
-
难度 2/5 1-3 小时 新手友好度 75/100
mksglu/context-mode#1200 ·
-
难度 2/5 1-3 小时 新手友好度 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
难度 2/5 1-3 小时 新手友好度 75/100
anthropics/claude-code#96687 ·
-
good first issue
难度 1/5 1 小时以内 新手友好度 95/100
AOSSIE-Org/DebateAI#582 · 2 条评论 ·