Cdk Virtual Scroll嵌套展开面板后滚动渲染延迟问题求助

问题根源 #

mat-expansion-panel是Angular Material中包含状态管理、动画逻辑的复杂组件，再加上你在头部嵌套多层<mat-label>，会大幅增加每个列表项的DOM节点数量和组件初始化开销。虚拟滚动在滚动时需要快速创建/销毁这些重组件，当同时渲染多个项时，就会出现明显的延迟；而仅展示单个值时，DOM结构和组件逻辑简化，渲染开销骤降，滚动自然流畅。

优化方案 #

1. 简化头部模板，移除不必要的组件嵌套

<mat-label>是为表单场景设计的专用组件，带有额外的样式和逻辑，这里用来展示纯文本属于过度使用。改用轻量的HTML元素（如div/span）布局，减少组件实例化和渲染计算：

<mat-expansion-panel-header>
  <div class="panel-header">
    <span>{{item.name}}</span>
    <span>{{item.startTime}}</span>
    <span>{{item.endTime}}</span>
    <span>{{item.status}}</span>
  </div>
</mat-expansion-panel-header>

配合基础CSS布局（避免依赖Material的组件样式）：

.panel-header {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

2. 开启组件缓存，禁用templateCacheSize: 0

你设置的templateCacheSize: 0会强制虚拟滚动每次滚动都销毁并重新创建所有可见的mat-expansion-panel组件，完全没有复用，这是性能瓶颈的核心原因之一。移除该配置或设置合理的缓存大小（建议5-10），让虚拟滚动复用已创建的组件实例，仅更新数据：

*cdkVirtualFor="let item of items; templateCacheSize: 8;"

3. 调整虚拟滚动的缓冲区参数

增大minBufferPx和maxBufferPx的值，让虚拟滚动提前渲染即将进入视口的列表项，把渲染开销分散到滚动过程中，避免滚动瞬间集中渲染导致的延迟：

<cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="1200" [maxBufferPx]="1500" scrollWindow>

4. 启用OnPush变更检测（进阶优化）

给mat-expansion-panel所在的组件启用OnPush变更检测策略，减少不必要的变更检测触发，提升组件更新效率：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'your-list-component',
  templateUrl: './your-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourListComponent {
  items: any[] = [];
  // ...其他逻辑
}

5. 关闭非必要的动画（可选）

如果业务不需要展开/收起动画，可以关闭mat-expansion-panel的动画，减少渲染时的动画计算开销：

<mat-expansion-panel [animated]="false" *cdkVirtualFor="let item of items">

验证效果 #

优先实施前3项优化（简化模板、开启缓存、调整缓冲区），这三项对性能提升最显著，通常能解决大部分滚动延迟问题。如果仍有卡顿，再逐步添加后面的进阶优化。

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