Fixed-header tables force one getBoundingClientRect per column on every mount (ResizeObserver-driven MeasureCell)
まだ誰も着手していません。
評価
- 難易度
- 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分
- マージ済み PR(30日)
- 2
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/table のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 50/100
react-component/table#1416 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 30/100
react-component/table#1403 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 15/100
react-component/table#1269 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
react-component/table#1257 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 45/100
react-component/table#1228 ·
react-component/table の issue をすべて見る
似ている issue
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
-
Mend: dependency security vulnerability untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100