Chrome 多个ag-grid表导致浏览器挂起

jvidinwx  于 2023-05-04  发布在  Go
关注(0)|答案(1)|浏览(200)

我在一个 Jmeter 板上工作,并有多个ag网格表。这些表有自己的数据获取机制(轮询或通过Web套接字获取数据)。总共有7个表,其中4个依赖于Web套接字,其余3个依赖于轮询数据。
在接收数据时,我们通常会:
1.添加/删除数据
1.电池 Flink
1.单元格样式(基于接收到的数据)
1.一些海关检查
当我们得到频繁的更新时(比如在一个页面上每分钟更新500个事件),页面变得没有响应,它开始显示缓慢甚至在表内滚动也变得困难。如果我们打开了同一个 Jmeter 板的3-4个选项卡,CPU执行在10分钟内飙升至100%,并且在不活动的选项卡中可以看到死亡的白色屏幕。
使用性能选项卡选中时:

从最后一张图可以看出,空闲时间非常少,80%是脚本运行时间。
我已经创建了ag-grid配置的repo,以及我们收到数据后的操作:ag-grid load issue
[What我已经试过了:
1.使用web-workers的不可变数据源(我遇到的限制是不能使用像gridApi.getRowNode这样的ag-grid函数来获取web-workers中的节点)
任何改进建议或寻找性能的方向都将是有帮助的。
谢谢
附:
1.上面的代码是不可执行的(因为我们有一些服务器配置),但足以给予你了解事情是如何设置的,以及它是如何执行的。
1.此外,我们有一个ag-grid小部件组件,它通常是ng-repeat在页面上的服务器配置和表呈现在页面上。
1.我们没有这样的10,000行(其中一个表中的最大行高达450)等。但是操作非常频繁,例如单元格的 Flink /运行单元格样式函数。
1.我们的table是什么样子的:(其中一个表)

0wi1tuuw

0wi1tuuw1#

正如user2555515在评论中所说,您可能希望缓存数据更新,并减少实际网格的更新频率。这是一个浏览器的限制,就像(或者更多)一个ag-grid的限制一样--我很确定只有一个前景(绘画)线程。
首先要认识到网格不是您的数据存储-您应该将数据存储在组件中,并将数据绑定到网格。
您可以让传入的数据更新未绑定到网格的数据存储副本,并且仅以固定的间隔(例如每秒一次)将其复制到绑定的版本。
为了潜在的更好的执行“批量更新”,网格API支持“事务”。

相关问题