Angular 13中使用CDK虚拟滚动appendOnly模式时滚动卡顿的问题咨询

针对你遇到的appendOnly模式下滚动卡顿问题，可从以下几个方向排查优化：

• 确保itemSize完全匹配实际列表项高度
  虚拟滚动的核心依赖itemSize计算渲染区域，若该值与列表项实际高度（含padding、margin、border）偏差较大，会导致频繁的布局重算和错误的渲染范围，直接引发卡顿。用浏览器开发者工具精确测量每个列表项的真实高度，替换当前的itemSize="100"。

• 优化ngFor的渲染效率
  列表渲染时务必添加trackBy函数，避免Angular在数据更新时销毁重建所有列表项：

  <cdk-virtual-scroll-viewport appendOnly
            class="container-fluid table-grid h-100 _dropddownScroll pipeline-main-wrapper" 
            itemSize="100">
    <div *cdkVirtualFor="let item of dataList; trackBy: trackById">
      <!-- 列表项内容 -->
    </div>
  </cdk-virtual-scroll-viewport>
  

  组件内定义trackBy函数：

  trackById(index: number, item: any): number {
    return item.id; // 用数据的唯一标识字段替换id
  }
  

• 调整缓冲区域参数
  appendOnly模式下，适当增大minBufferPx和maxBufferPx，提前预渲染下方的列表项，减少滚动时的即时渲染压力：

  <cdk-virtual-scroll-viewport appendOnly
            class="container-fluid table-grid h-100 _dropddownScroll pipeline-main-wrapper" 
            itemSize="100"
            minBufferPx="300"
            maxBufferPx="600">
  

  数值可根据列表项高度和滚动速度调整，避免设置过大导致内存占用过高。

• 简化列表项模板
  检查列表项内部是否存在复杂组件、大量数据绑定或频繁触发变更检测的逻辑（比如频繁调用pipe、*ngIf频繁切换）。尽量将复杂逻辑移到组件类中处理，减少模板内的计算操作；对于静态内容，可使用OnPush变更检测策略优化组件性能。

• 排查CSS样式问题
  确认viewport的h-100类是否正确继承了父元素高度，避免viewport高度动态变化引发重算；同时检查是否有样式导致列表项的高度不稳定（比如内容换行导致高度变化），确保所有列表项高度一致。

• 升级CDK补丁版本
  Angular 13的CDK可能存在部分虚拟滚动性能问题，建议升级到同大版本的最新补丁包（如@angular/cdk@13.3.9），修复已知的性能bug。

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