Ag-grid-angular 如何提高表格性能?

问题描述 投票:0回答:1

当我使用 JSON 数据呈现表格时,每个单元格都是自定义呈现的。当表中有很多列或行时,表渲染会停止。您有什么优化建议吗?或者不限于cellRender,任何其他有助于提高表格性能的建议都是可以接受的。谢谢。

有望提升ag grid年度渲染性能

angular ag-grid ag-grid-angular
1个回答
0
投票

Daxelarne评论中链接的页面中的信息有一些很好的信息,但不是非常连贯,所以这里有一些更简洁的建议。

如果您在许多列上使用自定义单元格渲染器,则开销可能会成为问题,特别是当您使用组件渲染器时。

单元格格式化程序的开销最小 - 如果可能的话尝试使用它们。

稍微复杂一点,并且开销更大的是作为函数的单元格渲染器 - 仍然相当轻量级。

在这两种情况下,您都需要保持格式化/渲染功能尽可能轻量级 - 如果您在那里做了很多工作,那么显然要渲染很多单元格会很慢。 如果可能的话,尝试使用纯函数作为渲染器。拥有很多行不应该影响渲染性能,除非您将 rowBuffer 设置得非常大或关闭了列优化

最重量级的是组件渲染器 - 因为渲染器将为每个渲染单元创建和销毁 - 该实例不会被重新使用。当有很多单元格需要渲染时尽量不要这样做。

就行数和列数而言,如果您使用客户端行模型,则默认设置是通过仅保留 DOM 中的可显示单元来虚拟化行和列。

列虚拟化的控制是一个开/关的事情——您要么虚拟化列,要么不虚拟化列。默认情况下,列虚拟化处于打开状态。 确保您没有将

suppressColumnVirtualisation

 设置为 true 将其关闭。

行虚拟化默认打开,但可以通过将

suppressRowVirtualisation

 设置为 true 来关闭。

启用行虚拟化后,您可以通过使用

rowBuffer

 设置设置“行缓冲区”的大小来控制在任意时间在 DOM 中保留的行数

因此,请确保行虚拟化打开,并且行缓冲区尽可能小,同时仍然能够显示“满页”的行,再加上更多(即尽可能小,但仍然工作)。

© www.soinside.com 2019 - 2024. All rights reserved.