Angular MatTable异步渲染咨询：大数据量渲染性能优化

当MatTable渲染大量数据时，确实可以通过分批异步渲染的方式，让行数据逐批加载渲染，避免一次性阻塞主线程导致的耗时过长问题。

核心实现思路 #

先初始化一个空的数据源，然后将完整数据拆分成小批次，通过定时器逐批将数据添加到数据源中，给浏览器留出足够的时间渲染每一批行，避免页面卡顿。

组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 替换成你的实际数据结构
interface TableItem {
  id: number;
  name: string;
  // 其他字段...
}

@Component({
  selector: 'app-large-table',
  templateUrl: './large-table.component.html',
  styleUrls: ['./large-table.component.css']
})
export class LargeTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name'];
  dataSource = new MatTableDataSource<TableItem>([]);
  fullDataList: TableItem[] = [];
  // 可根据行复杂度调整批次大小和延迟
  batchSize = 50;
  renderDelay = 50;

  ngOnInit(): void {
    // 这里替换成你的实际数据获取逻辑（比如从API请求）
    this.fullDataList = this.generateMockData();
    this.startBatchRender();
  }

  private startBatchRender(): void {
    if (this.fullDataList.length === 0) return;
    // 取出当前批次的数据
    const currentBatch = this.fullDataList.splice(0, this.batchSize);
    // 更新数据源，触发视图渲染
    this.dataSource.data = [...this.dataSource.data, ...currentBatch];
    // 递归处理下一批
    setTimeout(() => this.startBatchRender(), this.renderDelay);
  }

  // 模拟生成大量数据，实际项目中删除这段
  private generateMockData(): TableItem[] {
    const data: TableItem[] = [];
    for (let i = 0; i < 1500; i++) {
      data.push({ id: i + 1, name: `数据项 ${i + 1}` });
    }
    return data;
  }
}

模板代码 #

和普通MatTable模板完全一致，无需额外修改：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- ID列 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> 序号 </th>
    <td mat-cell *matCellDef="let item"> {{item.id}} </td>
  </ng-container>

  <!-- 名称列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let item"> {{item.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

额外优化建议 #

• 动态调整批次参数：如果行内包含复杂组件（比如下拉框、自定义组件），可以减小batchSize并缩短renderDelay；简单行则可以加大批次，提升加载速度。
• 结合虚拟滚动：搭配Angular CDK的cdk-virtual-scroll-viewport，只渲染可视区域内的行，和异步渲染结合能进一步降低性能压力。
• 预计算行内数据：把行内需要的管道转换、复杂计算提前在组件中处理完成，避免渲染时重复计算消耗资源。

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