javascript - AG-Grid 大数据集渲染时间(慢)

Question

我有一个包含大量但合理数量的数据的网格(大约 12,000 个单元格... 340 列和 34 行)。我知道这看起来像是一个横向表格，但对于我们的应用程序来说，它更有可能有大量的列和更少的行。

当数据大约为 2300 个单元格(68 列和 34 行)时，它足够快，我可以称之为“立即”。没什么我会担心的。



将其增加 5 倍导致初始渲染时间呈指数增长。具体来说，在 recursivelyCreateColumns 内，列的创建需要永远。方法。



达到 10 倍会导致它需要几分钟才能完成。到 20 时，它没有崩溃，但 5 分钟后它仍在运行，我怀疑它需要一个小时或更长时间。

我的问题是，即使我为 AG-Grid 创建网格列/行/数据的代码在 20 毫秒范围内运行，我是否可以做些什么来使 AG-Grid 更容易创建列？也许它只在必要时创建列？

我的网格设置如下:

var gridOptions = {
    enableCellExpressions: true,
    columnDefs: data.header,
    rowData: data.body.data,
    floatingTopRowData: data.body.floatingTopData,
    rowHeight: 25,
    headerHeight: 25,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    getNodeChildDetails: function(rowItem) {
        if(rowItem.items) {
            return {
                expanded: scope.gridOptions.rowData[0].something === rowItem.something,
                group: true,
                field: "something",
                key: rowItem.something,
                children: rowItem.items
            };
        }
        return null;
    }
};

Answer 1

查询 ag-grid Performance documentation
我复制到这里以便快速访问:
性能
ag-Grid 很快。然而，ag-Grid 也可以通过多种方式进行配置和扩展。
人们经常来到 ag-Grid 论坛并询问“为什么我的应用程序中的网格没有那么快？”。
本页介绍了如何使网格运行得更快。
1.设定期望
ag-Grid 可以像演示应用程序演示应用程序中演示的那样快。您可以通过调整浏览器的大小将演示应用程序调整为与应用程序中的网格相同的大小，然后在网格中导航(滚动、过滤器等)并查看演示网格与您自己的实现相比有多快。如果演示网格运行得更快，那么性能还有提升的空间。
2. 检查单元渲染器
ag-Grid 可以通过您的自定义单元格渲染器减慢速度。要对此进行测试，请从网格中移除所有单元格渲染器并再次比较速度。如果网格确实通过移除单元渲染器来提高其速度，请尝试一一引入单元渲染器以找出哪些渲染器增加了最多的开销。
3. 创建快速单元格渲染器
最快的单元渲染器具有以下属性:
网格渲染是高度定制的，纯 JavaScript 单元格渲染器将比框架等效项更快地工作。使用 ag-Grid 的框架版本仍然很好(例如用于设置 ag-Grid 属性等)，但是因为创建和销毁了太多单元格，框架添加的附加层对性能没有帮助。如果您有性能问题，应考虑使用普通 JavaScript 单元格渲染器。
不是每个人都需要极快的单元渲染器(例如，也许您的用户使用具有快速浏览器的快速机器，或者您的网格可能只有很少的列)，在这种情况下，框架单元渲染器可能会正常工作。不为单元使用框架的建议仅适用于您希望获得性能提升的情况。
由于创建和销毁大量单元格，使用单元格渲染器框架可能会更慢。大多数情况下，单元格中不会包含复杂的功能，因此使用纯 JavaScript 应该不是问题。对于所有其他组件(过滤器、编辑器等)，使用框架不会产生太大的差异，因为这些组件不像单元渲染器那样经常被创建和销毁。
4. 关闭动画
行和列动画可提供出色的用户体验。然而，并非所有浏览器都像其他浏览器一样擅长动画。考虑检查客户端的浏览器并为较慢的浏览器关闭行和列动画。
5.配置行缓冲区
rowBuffer 属性设置网格在可视区域之外呈现的行数。默认值为 10。例如，如果您的网格显示 50 行(因为这是屏幕上所有适合屏幕而不滚动的行)，那么该网格实际上将总共渲染 70 行(上面多出 10 行，下面多出 10 行)。然后当您滚动网格时，已经有 10 行准备好等待显示，因此用户将看不到重绘(并非所有浏览器都显示重绘，只有较慢的浏览器)。
设置低行缓冲区将使网格的初始绘制速度更快(例如，当第一次加载数据时，或在过滤、分组等之后)。设置高行缓冲区将减少重绘可见的垂直滚动。
6. 使用 Chrome
网格在 Google Chrome 上运行速度最快。如果可以，请告诉您的用户。
7. 了解数据更新
对于快速变化的数据，请考虑使用批量更新事务，它允许网格进行大量更新，而不会使浏览器陷入爬行状态。这也在博客 Streaming Updates in JavaScript Datagrids 中进行了演示，该博客每秒显示数十万次更新。
8. 另见
阅读文章8 性能黑客 用于 JavaScript，因此您知道网格在做什么，这样您就可以对其进行推理。
9.去抖垂直滚动
默认情况下，垂直滚动没有去抖动。但是，在速度较慢的浏览器上，尤其是 IE，根据您的应用程序，您可能希望消除垂直滚动的抖动。
要消除垂直滚动，请设置网格属性 debounceVerticalScrollbar=true。