9
                            codepen项目内分别用antd4和antd5版本的tree渲染3000个节点的列表,分别查看滚动时页面的帧率
antd5版本的tree在大数据量的虚拟列表滚动帧率正常
目前antd4版本的tree性能正常帧率稳定在30以上 antd5版本的tree在滚动时帧率只有20左右,最低会掉到15
| Environment | Info | 
|---|---|
| antd | 5.10.0 | 
| React | 18.0.0 | 
| System | - | 
| Browser | - | 
codepen项目内分别用antd4和antd5版本的tree渲染3000个节点的列表,分别查看滚动时页面的帧率
antd5版本的tree在大数据量的虚拟列表滚动帧率正常
目前antd4版本的tree性能正常帧率稳定在30以上 antd5版本的tree在滚动时帧率只有20左右,最低会掉到15
| Environment | Info | 
|---|---|
| antd | 5.10.0 | 
| React | 18.0.0 | 
| System | - | 
| Browser | - | 
看了一下,是 Tooltip 影响。新的 Tooltip 在滚动时会触发对齐逻辑。 v4
现在的Tooltip貌似也会影响虚拟Table的滚动性能,会有显著白屏
嗯,debug 下有很多琐碎的点聚合出了性能损耗。需要一个个解。
Note: 优化了一部分 CSS-in-JS 逻辑。其中有一部分损耗为了兼容低版本 React,这会导致每个 render 都增加 ~1ms,为了兼容暂时无法优化:
看了一下,是 Tooltip 影响。新的 Tooltip 在滚动时会触发对齐逻辑。
我测了下这里List 是不是有点不太对,滚动过程中这个List容器本身应该不需要render吧,但是现在看触发了很多次渲染
List 本身负责计算虚拟滚动展示范围,需要 render。