ant-design Table组件如果大量使用Tooltip, 渲染表格会比正常表格慢上许多, 同时内存占用容易堆积, 无法及时释放

vqlkdk9b  于 4个月前  发布在  其他
关注(0)|答案(9)|浏览(53)

Steps to reproduce

点击show data 按钮, 显示25列左右的50条数据. 通过手动切换修改是否render Tooltip来渲染单元格, 可以发现不增加Tooltip渲染速度明显更快

What is expected?

当遇到很多列(25列左右)时, 使用Tooltip渲染速度可以稍微变快, 同时内存占用减少

What is actually happening?

使用Tooltip渲染速度越来越慢, 内存占用会持续增加
| Environment | Info |
| ------------ | ------------ |
| antd | 5.20.0 |
| React | 18.3.1 |
| System | macos |
| Browser | chrome最新版 |

在项目当中, 如果来回切换当前页和其他页面, 通过任务管理器发现, 内存占用会持续增加,并且响应速度越来越慢, 不添加Tooltip则不会出现这种问题.

laawzig2

laawzig22#

以下是渲染耗时对比

:

e37o9pze

e37o9pze3#

看 profile 都是毫秒级的,有更多信息吗?

ig9co6j1

ig9co6j14#

看 profile 都是毫秒级的,有更多信息吗?

hello, 有的, 可以看下上面stackblitz链接, 推荐在本地运行的话, stackblitz上并不能很好的复现内存占用的情况, 通过切换注释掉 ellipsisTableTooltip来控制是否需要ellipsis, 当点击Bad Tooltip路由切换时, 有明显延迟, 如果稍微频繁的在两个页面切换, 内存也无法及时回收掉, 也会越来越慢

6fe3ivhb

6fe3ivhb5#

能排查一下是性能变慢的原因是因为开启了 ellipsis?还是因为渲染了 Tooltip?还是两者缺一不可?

3df52oht

3df52oht6#

能排查一下是性能变慢的原因是因为开启了 ellipsis?还是因为渲染了 Tooltip?还是两者缺一不可?

渲染了 Tooltip 才会变慢, ellipsis不影响

y53ybaqx

y53ybaqx7#

的确是这样,我也遇到了,上百列加了虚拟滚动也是很卡,我的场景是Typography组件ellipsis起作用时会有tooltip提示

xsuvu9jc

xsuvu9jc8#

自己在本地简单测试了下,确实是这样。

dy1byipe

dy1byipe9#

Hello @ybf970928. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @ybf970928,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

相关问题