ag-grid 的性能问题
Posted
技术标签:
【中文标题】ag-grid 的性能问题【英文标题】:Performance issue with ag-grid 【发布时间】:2020-10-27 08:46:34 【问题描述】:如果将 ag-grid 与自定义标题组件和自定义单元格渲染器一起使用,则会出现巨大的滚动性能问题。我们尝试了大约 10000 行 x 10000 列。没有自定义渲染器,它运行流畅。自定义单元格渲染器会导致整体性能问题,并且仅应用自定义标题会导致水平滚动问题(垂直滚动很好)。我们正在使用 ag-grid-react。如果与其他框架组件而不是默认组件一起使用,ag-grid 是否有任何问题?
【问题讨论】:
ag-grid.com/javascript-grid-performance/#2-check-cell-renderersThe grid rendering is highly customised and plain JavaScript cell renderers will work faster than framework equivalents.
【参考方案1】:
我们在 Editable ag-grid 中使用自定义组件时遇到了类似的问题,尽管我们的数据约为 1000 行和 20 列。
通过将我们的自定义组件从单元格渲染器移植到单元格编辑器,我们的性能大幅提升。
在此过程中,我研究了 ag-grid 的内部工作原理,发现默认情况下在 ag-grid 中启用了虚拟化,这意味着每当您滚动时,您的一些组件会被挂载,而另一些则会被卸载。如果你为很多组件考虑它,这是一个非常繁重的操作。
在尝试official docs 上讨论的方法之前,我建议您增加 rowBuffer 并查看您是否获得任何性能,如果您像我们一样使用一些可编辑组件作为单元格渲染器,然后将它们移植到单元格编辑器.
【讨论】:
以上是关于ag-grid 的性能问题的主要内容,如果未能解决你的问题,请参考以下文章
Ag-grid 中 onCellValueChanged 和 Tab 键的问题