web-dev-qa-db-ja.com

AG-グリッドの大きなデータセットのレンダリング時間（遅い）

大量であるが妥当な量のデータ（約12,000セル... 340列34行）のグリッドがあります。私はそれが横向きのテーブルのように見えることを知っていますが、私たちのアプリケーションでは、列がたくさんあり、行が少ない可能性が高いです。

データが約2300セル（68列34行）の場合、「即時」と呼べるほど高速でした。心配することは何もありません。

enter image description here

5倍に増やすと、初期レンダリング時間が指数関数的に増加します。具体的には、列の作成はrecursivelyCreateColumnsメソッド内で永久にかかります。

enter image description here

10xにすると、完了するまでに数分かかります。 20に行くと、クラッシュしませんでしたが、5分後もまだ進行中で、1時間以上かかると思います。

私の質問は、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;
    }
};
javascriptperformanceag-grid
15
oooyaya

行の仮想化

行の仮想化とは、画面に表示されている行のみをレンダリングすることを意味します。たとえば、グリッドに10,000行があり、画面内に収まるのは40行のみの場合、グリッドは40行のみをレンダリングします（各行はDIV要素で表されます）。ユーザーが上下にスクロールすると、グリッドはその場で新しく表示された行の新しいDIV要素を作成します。

グリッドが10,000行をレンダリングする場合、作成されるDOM要素が多すぎるため、ブラウザーがクラッシュする可能性があります。行の仮想化では、現在ユーザーに表示されているものだけをレンダリングすることで、非常に多くの行を表示できます。

以下の画像は、行の仮想化を示しています。DOMには、ユーザーが実際に表示する行数と一致する5行または6行しかレンダリングされていないことに注意してください。

enter image description here

列の仮想化

列の仮想化は、行の仮想化が行に対して行うのと同じように、列に対して行います。つまり、列の仮想化では、現在表示されている列のみがレンダリングされ、ユーザーが水平方向にスクロールすると、グリッドはより多くの列をレンダリングします。

列の仮想化により、グリッドのパフォーマンスを低下させることなく、グリッドに多数の列を表示できます。

Javascriptのパフォーマンスハック

AG-グリッド行モデル

1
Hariom Mangal