AG-Grid 大数据集渲染时间（慢）答案

【问题标题】：AG-Grid large dataset render time (slow)AG-Grid 大数据集渲染时间（慢）
【发布时间】：2023-03-29 10:59:01
【问题描述】：

我有一个网格，其中包含大量但合理的数据（大约 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;
    }
};

【问题讨论】：

您使用的是什么版本的 ag-Grid？从您的配置中，您应该启用列虚拟化，这意味着唯一呈现的列是可见的列。你所说的卷在这里应该不是问题
版本 6.1.0。特别是缩小版。我将它插入 Angular 1.4.7（无法升级 Angular），但我的测试表明它似乎只与 AG-Grid 相关，所以我不太担心 Angular 部分。
另外，如果重要的话，每列都是一个 5 层组。含义column = {headerName: "something", children: [{headerName: "something2", children: [{headerName: "something3"....
如果我将其设为单层列（无列分组），那么即使我将数据增加 50 倍（3303 列！），它也几乎是即时的。问题是，我绝对需要这种分层。以前使用单独的头表作为从属的实验并不能解决其他问题。
你有我可以看一看的plunker吗？我可以看一下，看看我是否能找出问题所在。我相信我们可以找出这里发生的事情并为您解决它

标签： javascript performance ag-grid

【解决方案1】：

行虚拟化

行虚拟化意味着我们只渲染屏幕上可见的行。例如，如果网格有 10,000 行但只有 40 行可以容纳在屏幕内，则网格将仅呈现 40 行（每行由一个 DIV 元素表示）。当用户向上和向下滚动时，网格将动态为新可见的行创建新的 DIV 元素。

如果网格要渲染 10,000 行，它可能会导致浏览器崩溃，因为创建了太多 DOM 元素。行虚拟化允许通过仅呈现用户当前可见的内容来显示大量行。

下图显示了行虚拟化 - 请注意 DOM 如何仅渲染 5 或 6 行，与用户实际看到的行数相匹配。

列虚拟化

列虚拟化对列的作用与行虚拟化对行的作用相同。换句话说，列虚拟化只渲染当前可见的列，而网格会随着用户水平滚动而渲染更多列。

列虚拟化允许网格显示大量列，而不会降低网格的性能。

Performance Hacks For Javascript

AG-Grid Row Models

【讨论】：

同意 - 在这种情况下，列虚拟化可能会很快

【解决方案2】：

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

8.另请参阅 阅读文章 8 Performance Hacks for JavaScript，这样您就知道网格在做什么，这样您就可以对其进行推理。

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

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

【讨论】：

【解决方案3】：

我知道大多数人不会遇到这种情况，但它绝对可以节省一些时间 - 确保在关闭开发工具的情况下检查性能。我发现当开发工具打开时 UI 卡住了，但关闭时它很快。

您也可以手动给 gridOptions rowBuffer 提供帮助。

【讨论】：