🔝

2025年版 JavaScript DataTable パフォーマンス比較

に公開
JavaScript
JavaScript
tech

はじめに

大規模データを扱うアプリケーションにおいて「DataGrid（データグリッド）」は欠かせません。
そこで今回は、人気のある JavaScript 製の DataGrid をいくつか選び、パフォーマンスを比較しました。

参加者は以下の4つです：

  • Webix Grid

  • AG Grid

  • Kendo jQuery Data Grid

  • Bryntum Grid

各 DataGrid の特徴

Webix Grid


Webix Grid は、大規模データ処理向けに設計された JavaScript Datagrid です。ソート、フィルタ、ページング、ドラッグ＆ドロップ、クリップボード対応などの基本機能に加え、エリア選択、グループ化、スパークライン、サブビューといった高度機能も搭載。レスポンシブ対応で複雑なデータセットにも柔軟に対応します。

Kendo jQuery Data Grid


アダプティブレンダリング、列操作、集計、仮想化、キーボード操作など豊富な機能を搭載。エンタープライズ用途で広く利用されています。
Link

AG Grid

Angular / React / Vue に対応した汎用性の高いグリッド。ソート、フィルタ、編集、カスタマイズ性が高く、ビジネスアプリにも広く使われています。
Link

Bryntum Grid

Vue、Angular、React、Salesforce と統合可能なグリッド。列固定、カスタムセルレンダリング、グループ化などの機能を持ちますが、性能面で課題もあります。
Link

テスト条件

公平性のため、以下の条件で比較しました：

  • 各グリッドはデフォルト設定（列幅のみ統一）

  • 同一データセットをローカル生成

  • performance.now() による計測

  • Chrome / 16GB RAM の環境で実施

ラウンド1: 行数テスト（Rows Round）

最大100万行までデータを増やし初期化速度を測定しました。

  • Webix Grid と Kendo → 安定して高速

  • AG Grid → 10万行を超えると遅延

  • Bryntum → 早期からラグ発生

ランキング（行の処理性能）

  1. Webix Grid

  2. Kendo jQuery Data Grid

  3. AG Grid

  4. Bryntum Grid

ラウンド2: 列数テスト（Columns Round）

列数を最大1000列まで増加させ計測。

  • Webix Grid → 常に安定した速度

  • AG Grid → 非常に良好で Webix に近い

  • Kendo → 小規模では良好だが、大規模では差が出る

  • Bryntum → 列数増加とともに性能低下

ランキング（列の処理性能）

  1. Webix Grid

  2. AG Grid

  3. Kendo jQuery Data Grid

  4. Bryntum Grid

Webix Grid が強い理由

Webix Grid (JavaScript Datagrid) が高パフォーマンスを実現している理由は、その独自のレンダリング戦略にあります。

  • Lazy Rendering: DOM に描画するのは常に「画面に表示されている要素のみ」

  • ブラウザ制限回避: データを分割しスクロールと UI を別処理

これにより、データ量が増えても処理時間が一定で、パフォーマンス低下を防ぎます。

まとめ

今回の検証から以下が明らかになりました：

  • 中規模まではほぼ全ての DataGrid が良好

  • 大規模データでは差が顕著に出る

  • Webix Grid は常に最速かつ安定

もし「大規模データを効率的に処理したい」なら、Webix Grid が最有力候補です。

Discussion