AgGrid JSON日期列大数据量排序过滤性能优化问询

遇到20K+记录下AgGrid日期排序/过滤卡顿的问题，核心原因是你当前的比较器每次排序都重复调用moment解析日期——moment的实例化和解析有不小的性能开销，在大数据量下会被持续放大。下面是几个针对性的优化方案，按见效优先级排序：

1. 预处理日期数据，提前转换为可比数字（最推荐） #

在数据加载到AgGrid之前，把所有日期字段预先转换为时间戳（如Date.getTime()返回的毫秒数）或者其他可比数字格式。这样排序时直接用数字比较，完全避免了运行时的日期解析开销。

示例代码：

// 假设你的原始数据是rawData，日期字段名为"transactionDate"
const processedData = rawData.map(item => {
  const dateTimestamp = item.transactionDate ? new Date(item.transactionDate).getTime() : null;
  return {
    ...item,
    // 新增一个用于排序的预处理字段
    transactionDateSortKey: dateTimestamp
  };
});

// 然后在AgGrid的列定义中，指定用这个预处理字段排序
const columnDefs = [
  {
    headerName: "交易日期",
    field: "transactionDate",
    // 方式1：直接用预处理字段做比较逻辑
    comparator: (date1, date2, node1, node2) => {
      return node1.data.transactionDateSortKey - node2.data.transactionDateSortKey;
    },
    // 方式2：更简洁的配置，指定排序字段为预处理字段
    sortField: "transactionDateSortKey"
  }
];

2. 替换moment.js为原生Date API #

如果无法提前预处理数据，那么把比较器里的moment替换成原生Date API——原生API的解析和转换性能远高于moment，能大幅降低单条数据的处理耗时。

优化后的比较器代码：

function dateComparator(date1, date2) {
  // 封装原生日期解析逻辑
  const getSortableValue = (dateStr) => {
    if (!dateStr) return null;
    const timestamp = Date.parse(dateStr);
    return isNaN(timestamp) ? null : timestamp;
  };

  const val1 = getSortableValue(date1);
  const val2 = getSortableValue(date2);

  // 处理空值/无效值的排序逻辑（保持和你原代码一致）
  if (val1 === null && val2 === null) return 0;
  if (val1 === null) return -1;
  if (val2 === null) return 1;

  // 直接用数字比较，最快的排序方式
  return val1 - val2;
}

3. 启用服务器端排序/过滤（适合超大数据集） #

如果后续数据量还会增长，或者同时有复杂的过滤需求，建议把排序和过滤逻辑转移到后端处理。AgGrid的Server-Side Row Model支持分页、排序、过滤的后端交互，前端只负责渲染返回的结果，完全避免前端处理大数据的性能压力。

4. 调整AgGrid基础配置辅助优化 #

配合上面的方案，你还可以调整AgGrid的一些配置来进一步提升体验：

• 启用rowBuffer减少DOM渲染的波动
• 关闭不必要的动画或单元格更新效果（如enableCellChangeFlash设为false）
• 保持默认的列虚拟化（不要关闭suppressColumnVirtualisation），减少同时渲染的列数

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