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

Question

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

ooo*_*aya 14 javascript performance ag-grid

我有一个大而合理数据量的网格(大约12,000个单元格...... 340列和34行).我知道这似乎是一个侧面的表,但它恰好发生在我们的应用程序中,它更可能有大量的列和更少的行.

当数据大约是2300个单元格(68列和34行)时,它足够快,我可以称之为"立即".我什么都不担心.

将其增加5倍会导致初始渲染时间呈指数增长.具体而言,在recursivelyCreateColumns方法中永久地创建列.

转到10x会导致需要几分钟才能完成.走到20,它没有崩溃,但是5分钟后它还在继续,我怀疑它需要一个小时或更长时间.

我的问题是,即使我为AG-Grid创建网格列/行/数据的代码在20ms范围内运行,我还能做些什么来让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;
    }
};

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

检查ag-grid 性能文档

我把它复制在这里以便快速访问：

表现

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. 了解数据更新 对于快速变化的数据，请考虑使用批量更新事务，它允许网格进行大量更新，而不会使浏览器变得缓慢。JavaScript Datagrids 中的流式更新博客也对此进行了演示，该博客显示每秒数十万次更新。

8. 另请参阅 阅读文章 8 JavaScript性能黑客，这样您就知道网格在做什么，这样您就能够对其进行推理。

9. 垂直滚动去抖动 默认情况下，垂直滚动没有去抖动。然而，在慢速浏览器上，尤其是 IE，根据您的应用程序，您可能希望消除垂直滚动的抖动。

要消除垂直滚动的抖动，请设置网格属性 debounceVerticalScrollbar=true。