如何用Ag-Grid高效展示超大数据集？求方案与架构建议

核心结论先明确 #

• 绝对不能把1GB全量数据加载到浏览器：浏览器内存和JS引擎处理能力有限，1GB JSON解析后会占用数倍内存，直接引发崩溃——这和Ag-Grid无关，是架构设计上的错误。
• Ag-Grid完全适配超大数据集：官网10万行示例能流畅运行，核心是用了服务器端行模型（Server-Side Row Model），而非全量加载数据。

可行的超大数据集展示方案 #

1. 优先用Server-Side Row Model（最推荐）

这是Ag-Grid专为超大规模数据设计的模式，所有分页、排序、过滤、分组逻辑都在服务器端完成，浏览器仅获取当前需要渲染的数据块（比如当前视口内的行）。

核心配置示例：

gridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      // 向服务器请求数据，携带分页、排序、过滤参数
      fetch('/api/grid-data', {
        method: 'POST',
        body: JSON.stringify({
          startRow: params.startRow,
          endRow: params.endRow,
          sortRules: params.sortModel,
          filterRules: params.filterModel
        })
      })
      .then(res => res.json())
      .then(data => {
        params.success({
          rowData: data.rows,
          rowCount: data.totalCount // 总数据量，用于滚动/分页计算
        });
      })
      .catch(err => params.fail());
    }
  }
};

2. 虚拟滚动配合分段加载

如果数据量在百万级以内，且暂不想做服务器端改造，可以用Ag-Grid默认开启的虚拟滚动，但绝对不能一次性加载全量数据：

• 初始加载前1000行数据
• 当用户滚动到接近底部时，再请求下一个1000行，用addRowData方法动态追加到表格中
• 虚拟滚动会自动只渲染视口内的行，避免DOM过载

3. 数据瘦身与传输压缩

• 服务器端只返回表格需要的字段：剔除JSON中冗余的嵌套属性、无关字段，直接减少数据体积
• 启用HTTP压缩（gzip/brotli）：1GB原始数据压缩后可能仅几十到几百MB，大幅降低传输和解析压力

当前项目的修复建议 #

1. 立刻停止全量加载JSON的做法，这是引发崩溃的根本原因
2. 重构数据获取逻辑，改用Server-Side Row Model，把数据分页、过滤逻辑迁移到服务器端
3. 测试调优：从每页100行开始，逐步调整分页大小，找到性能与体验的平衡点

内容的提问来源于stack exchange，提问作者Akaash