【问题标题】:How to increase ag-grid drawing performance如何提高 ag-grid 绘图性能
【发布时间】:2019-08-23 02:11:34
【问题描述】:

ag-grid-enterprise v20.2.0。 Chrome v73。

我有几列和一个带有全屏网格的大型数据集。我没有任何自定义渲染,我使用 batchUpdateRowData() 添加到网格中。

当我的应用加载时,我会加载多达 20000 条记录的历史记录。每次绘制网格大约需要 150 毫秒(根据控制台)。

有什么建议可以提高绘图性能...还是我期望过高?由于开始时加载的数据量很大,每次绘制都是重新绘制网格。

很遗憾,我无法避免加载这些记录。

额外信息: 重绘的原因是因为我的网格按时间戳降序排序,并且历史从最旧到最新加载。它是从一个持久主题加载的,因此必须按那个顺序加载,这很烦人。

【问题讨论】:

    标签: ag-grid


    【解决方案1】:

    1) 鉴于您正在加载 20000 行,您最大的问题将是 Ag-Grid 在组件启动时尝试加载并显示所有 20000 行。您应该使用infinite scrolling,它仅在您的视口/Ag-grid 表上显示固定数量的行,并在您沿网格滚动时动态删除加载其余行的“隐藏”行。简而言之,您必须将rowModelType 属性设置为infinite

    2)这点是关于你的row buffers,和上面的点有类似的概念。

    3) 进行无限滚动的另一种替代方法是使用服务器端分页,即您只获取该给定页面的 x 行数,并在向下滚动/到下一页时获取更多行数。

    4) 如果可能,尽量不要禁用suppressColumnVirtualization,因为在滚动到之前,不可见的列会一直呈现,因此原始设置可能会稍微提高性能。

    【讨论】:

    • 1) to load and display all 20000 of them when your component starts up ,实际上不是。无论您使用什么类型的模型,ag-grid 都会显示唯一可见的行数,其他的会被隐藏。
    • @un.spike 哦,真的吗?我不知道。我一直认为我们必须手动切换到无限滚动才能工作。我的“隐藏”,您的字面意思是隐藏 DOM 元素的 CSS 属性吗?或者你的意思是从 DOM 本身销毁节点?
    • 它不会出现在 DOM 中,但它不应该是可见的
    猜你喜欢
    • 2023-04-03
    • 2013-01-29
    • 1970-01-01
    • 1970-01-01
    • 2020-10-27
    • 1970-01-01
    • 2011-05-14
    • 1970-01-01
    • 2023-03-26
    相关资源
    最近更新 更多