AG-Grid客户端32.1.0版本初始化加载过慢问题求助

问题描述 #

我使用AG-Grid客户端版本32.1.0，渲染约5000条用户数据时，浏览器显示数据前耗时极长。用户JSON文件大小3.1MB，完全加载需约11.9秒，期间一直显示“加载中”提示。已尝试分页、rowBuffer等方案，但AG-Grid仍一次性加载所有数据，问题原因不明，寻求帮助。

代码片段 #

let gridOptions = {
    columnDefs: columnDefs,
    onGridReady: (params) => {
        fetch("<%= users_path %>")
            .then(response => response.json())
            .then(data => {
                params.api.setGridOption('rowData', data['users']);
                params.api.sizeColumnsToFit();
            });
    },
    onGridSizeChanged: (params) => {
        params.api.sizeColumnsToFit();
    },

    pagination: true,
    paginationPageSize: 30,
    paginationPageSizeSelector: [30, 50, 70, 100],

    defaultColDef: {
        flex: 1,
        minWidth: 100,
        filter: true,
        floatingFilter: true,
        suppressToolPanel: true
    }
};

问题核心原因 #

你当前的实现是一次性把所有5000条数据加载到客户端，AG-Grid的客户端分页只是在本地数据里做切片展示，并没有减少初始数据加载量。11.9秒的耗时主要是JSON文件下载+解析的时间，和AG-Grid本身渲染关系不大。

优化方案 #

1. 服务端分页（最有效） #

客户端分页只适合小数据量场景，5000条数据必须做服务端分页：

• 修改后端接口，支持按页码、每页条数返回数据（比如/users?page=1&pageSize=30）
• 在AG-Grid中启用服务端分页模式，替换当前的客户端分页：

  let gridOptions = {
      // 替换原有pagination配置，启用服务端分页
      rowModelType: 'serverSide',
      serverSideStoreType: 'partial', // 只缓存当前必要数据
      pagination: true,
      paginationPageSize: 30,
      paginationPageSizeSelector: [30, 50, 70, 100],
  
      // 配置服务端数据获取逻辑
      datasource: {
          getRows: (params) => {
              fetch(`<%= users_path %>?page=${params.request.page+1}&pageSize=${params.request.pageSize}`)
                  .then(response => response.json())
                  .then(data => {
                      params.success({
                          rowData: data.users,
                          rowCount: data.totalCount // 后端返回总条数
                      });
                      params.api.sizeColumnsToFit();
                  })
                  .catch(err => params.fail());
          }
      },
  
      // 保留原有其他配置
      columnDefs: columnDefs,
      onGridSizeChanged: (params) => {
          params.api.sizeColumnsToFit();
      },
      defaultColDef: {
          flex: 1,
          minWidth: 100,
          filter: true,
          floatingFilter: true,
          suppressToolPanel: true
      }
  };
  

2. 优化JSON加载与解析 #

如果暂时无法修改服务端，可优化前端加载过程：

• 开启后端Gzip压缩：3.1MB的JSON压缩后通常能降到500KB以下，大幅减少下载时间
• 分批加载数据，避免一次性注入所有rowData：

  // 分批加载，每次处理100条
  const batchSize = 100;
  async function loadDataInBatches(data) {
      for (let i = 0; i < data.users.length; i += batchSize) {
          const batch = data.users.slice(i, i + batchSize);
          params.api.applyTransaction({ add: batch });
          // 给浏览器留渲染时间
          await new Promise(resolve => setTimeout(resolve, 0));
      }
  }
  
  // 在onGridReady中调用
  fetch("<%= users_path %>")
      .then(response => response.json())
      .then(data => {
          loadDataInBatches(data);
          params.api.sizeColumnsToFit();
      });
  

3. 禁用不必要的AG-Grid特性 #

当前defaultColDef中启用了filter和floatingFilter，这些会在数据加载时初始化过滤逻辑，可临时禁用测试是否提升速度：

defaultColDef: {
    flex: 1,
    minWidth: 100,
    // 暂时禁用过滤
    filter: false,
    floatingFilter: false,
    suppressToolPanel: true
}

验证方法 #

• 打开浏览器开发者工具Network面板，查看users_path请求的耗时：如果下载时间占10秒以上，优先做服务端分页+Gzip压缩
• 查看Performance面板，记录加载过程，确认是JSON解析耗时还是AG-Grid渲染耗时

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