AG-Grid大数据集渲染时间（慢） [英] AG-Grid large dataset render time (slow)

问题描述

我有一个网格，其中包含大量但合理的数据（大约12,000个单元格... 340列和34行）。我知道这似乎是一个横盘，但恰好对于我们的应用程序来说，它的列数更多，行数更少。

当数据约为2300个单元（68列和34行）时，它的速度足够快，我可以称之为立即。不用担心。

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

我的问题是，甚至尽管我创建用于AG-Grid处理的网格列/行/数据的代码在20ms范围内运行，但是我可以做些什么使AG-Grid轻松创建列？也许只是在必要时才创建列？

我的网格设置如下：

  var gridOptions = {
 enableCellExpressions：true，
 columnDefs：data.header，
 rowData：data.body.data，
 floatTopRowData：data.body。 floatTopData，
 rowHeight：25，
 headerHeight：25，
 enableColResize：true，
 enableSorting：true，
 enableFilter：true，
 getNodeChildDetails：function（ rowItem）{
 if（rowItem.items）{
返回{
扩展：scope.gridOptions.rowData [0] .something === rowItem.something，
组：true ，
字段： something，
键：rowItem.something，
子级：rowItem.items 
}; 
} 
返回null； 
} 
}; 
  

解决方案

行虚拟化

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

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

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

列虚拟化

列虚拟化对列的作用与行虚拟化对行的作用一样。换句话说，列虚拟化仅呈现当前可见的列，并且当用户水平滚动时，网格将呈现更多列。

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

针对Java的性能黑客

AG网格行模型

I have a grid with a large but reasonable amount of data (approx 12,000 cells... 340 columns and 34 rows). I know that seems like a sideways table but it just happens that for our application, it's more likely to have tons of columns and fewer rows.

When the data was about 2300 cells (68 columns and 34 rows), it was fast enough that I could call it "immediate". Nothing I'd worry about.

Increasing it 5x has caused an exponential increase in initial render time. Specifically, the creation of the columns takes forever, within the recursivelyCreateColumns method.

Going to 10x causes it to take a few minutes to complete. Going to 20, it didn't crash but after 5 minutes it was still going and I suspect it was going to take an hour or more.

My question is, even though my code to create the grid column/row/data for AG-Grid to process runs in the 20ms range, is there something I can do to make it easier for AG-Grid to create the columns? Maybe have it only create the columns when necessary?

My grid setup is as follows:

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;
    }
};

解决方案

Row Virtualisation

Row virtualization means that we only render rows that are visible on the screen. For example, if the grid has 10,000 rows but only 40 can fit inside the screen, the grid will only render 40 rows (each row represented by a DIV element). As the user scrolls up and down, the grid will create new DIV elements for the newly visible rows on the fly.

If the grid was to render 10,000 rows, it would probably crash the browser as too many DOM elements are getting created. Row virtualization allows the display of a very large number of rows by only rendering what is currently visible to the user.

The image below shows row virtualization - notice how the DOM only has 5 or 6 rows rendered, matching the number of rows the user actually sees.

Column Virtualisation

Column virtualization does for columns what row virtualization does for rows. In other words, column virtualization only renders the columns that are currently visible and the grid will render more columns as the user scrolls horizontally.

Column virtualization allows the grid to display large numbers of columns without degrading the performance of the grid.

Performance Hacks For Javascript

AG-Grid Row Models

这篇关于AG-Grid大数据集渲染时间（慢）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！