perf: observe columns with one ResizeObserver instance #706
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/react-component/table/DqLNNuQtfdnCNJWujSRePTh5FHQf |
|
好了，添加了 ResizeObserver.Collection。可以一次性收集所有子 ResizeObserver 的变化： |
Codecov Report
@@ Coverage Diff @@
## master #706 +/- ##
=======================================
Coverage 99.67% 99.68%
=======================================
Files 32 33 +1
Lines 935 951 +16
Branches 284 285 +1
=======================================
+ Hits 932 948 +16
Misses 3 3
Continue to review full report at Codecov.
|
src/Body/MeasureRow.tsx
Outdated
| onColumnResizeRef.current = onColumnResize; | ||
| const debounceColumnResize = React.useMemo( | ||
| () => | ||
| debounce( |
There was a problem hiding this comment.
Debounce 可以去掉了，ResizeObserver.Collection 里做过一次了~
There was a problem hiding this comment.
emmm...看了下源码似乎没有发现，这里的 debounce 是处理连续调整 table 大小导致多次触发 resize callback 的情况哦
There was a problem hiding this comment.
Screen.Recording.2021-11-30.at.11.18.00.AM.mov
例如拖动调整大小，单纯用 ResizeObserver.Collection 卡顿还是挺明显的
<ResizeObserver.Collection
onBatchResize={infoList => {
infoList.forEach(({ data, size }) => {
onColumnResize(data, size.offsetWidth);
});
}}
></ResizeObserver.Collection>There was a problem hiding this comment.
我的想法是渲染同步更重要一些，所以在 onBatchResize 里是通过 Promise 做帧的同步。这边的 debounce 做 1200 是渲染快了，但是同步慢了。
这样，做个折中用 https://github.com/react-component/util/blob/master/src/raf.ts 做 2 帧 delay 好了。
There was a problem hiding this comment.
OK，虽然没有 debounce 那么丝滑，相较于单帧渲染还是自然一些。
There was a problem hiding this comment.
请问是因为表格body添加了MesureRow而表格头没有添加，导致的上下宽度改变不同步吗？ ant-design/ant-design#33545
There was a problem hiding this comment.
ref to #731 (comment)
|
|
问题描述：设置 scroll.x，resize 或者切换侧边栏时，卡顿明显。Ref: ant-design/ant-design#27775
解决方式：单个
ResizeObserver实例observe所有列，支持在一个 Task 周期批量处理 Resize 引发的 Update优化结果：固定栏平铺-折叠切换，所需用时 6646.2ms ➜ 1080.8 ms
具体分析：#701 (comment)