如何优化ngx-datatable加载大批量数据时的性能

1 优先修复模板绑定的核心性能问题 #

当前模板中[rows]绑定了getRecipients()方法，Angular每触发一次变更检测都会执行该方法，导致ngx-datatable频繁重渲染，数据量越大卡顿越明显：

<!-- 优化前 -->
[rows]='getRecipients()'
<!-- 优化后 直接绑定变量，避免方法调用触发的重复计算 -->
[rows]="recipients"

优化后可直接删除组件中无用的getRecipients()方法。

2 精简前端数据处理逻辑 #

当前seedRecipients方法存在多次无意义的数组遍历、拷贝操作，数据量越大额外开销越高：

// 优化前逻辑
seedRecipients(csvRecordsArr: Recipient[]) {
  for (let y = 0; y < csvRecordsArr.length; y++) {
    const recipient = csvRecordsArr[y];
    recipient.status = this.getStatus(recipient);
    this.recipients.push(csvRecordsArr[y]);
  }
  this.recipients = [...this.recipients]; // 全量数组解构拷贝，大数组下极耗性能
  this.origRecipients = JSON.stringify(this.recipients); // 全量序列化开销极高
  this.checkStatus();
}

// 优化后逻辑
seedRecipients(csvRecordsArr: Recipient[]) {
  // 单次遍历完成数据处理，无多余拷贝
  this.recipients = csvRecordsArr.map(rec => {
    return {...rec, status: this.getStatus(rec)}
  });
  // 若origRecipients用于数据恢复，建议改为只存储修改过的条目，不要全量序列化
  // 必须全量存储时放到requestIdleCallback执行，避免阻塞主线程
  requestIdleCallback(() => {
    this.origRecipients = JSON.stringify(this.recipients);
  })
  this.checkStatus();
}

如果getStatus逻辑复杂，建议直接在后端接口返回值里新增status字段，前端无需额外计算，进一步减少处理耗时。

3 开启ngx-datatable虚拟滚动 #

ngx-datatable的虚拟滚动特性只会渲染可视区域内的行，不管总数据量是几千还是几万，渲染开销都是固定的，是大列表优化的首选方案：

<ngx-datatable
    #table
    class='data-table'
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="37"
    [footerHeight]="50"
    [rowHeight]="38" <!-- 固定行高是虚拟滚动生效的前提，你已经配置了 -->
    [reorderable]="false"
    [limit]="7"
    [scrollbarV]="true" <!-- 开启垂直虚拟滚动 -->
    [virtualization]="true" <!-- 部分版本需要显式开启虚拟渲染 -->
    (activate)="onActivate($event, editContent)"
    [rows]="recipients">
</ngx-datatable>

4 后端接口优化 #

• 给数据库表AdhocRewardInfo的CampaignNo字段添加索引，大幅提升查询速度
• 数据量超过1万条时建议增加分页/无限滚动逻辑：前端传递页码、每页条数、排序参数，后端返回对应页的数据，避免全量数据传输、处理的开销
• 若需要排序，直接在后端SQL查询时完成排序再返回给前端，避免前端大数组排序的性能损耗

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