ag-grid 的性能问题答案

【问题标题】：Performance issue with ag-gridag-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-renderers
The grid rendering is highly customised and plain JavaScript cell renderers will work faster than framework equivalents.

标签： ag-grid ag-grid-angular ag-grid-react ag-grid-vue

【解决方案1】：

我们在 Editable ag-grid 中使用自定义组件时遇到了类似的问题，尽管我们的数据约为 1000 行和 20 列。

通过将我们的自定义组件从单元格渲染器移植到单元格编辑器，我们的性能大幅提升。

在此过程中，我研究了 ag-grid 的内部工作原理，发现默认情况下在 ag-grid 中启用了虚拟化，这意味着每当您滚动时，您的一些组件会被挂载，而另一些则会被卸载。如果你为很多组件考虑它，这是一个非常繁重的操作。

在尝试official docs 上讨论的方法之前，我建议您增加 rowBuffer 并查看您是否获得任何性能，如果您像我们一样使用一些可编辑组件作为单元格渲染器，然后将它们移植到单元格编辑器.

【讨论】：