Angular动态尺寸大列表重复渲染卡顿，求性能优化方案

一、缓存已渲染视图实现复用 #

针对切换章节时重复渲染的问题，直接缓存已渲染视图是最直接的解决方案：

1. 用ng-template+ViewContainerRef手动缓存 #

给每个章节的列表对应创建模板，首次渲染后把视图存入Map，切换章节时直接复用，无需重新生成DOM：

// 组件类代码
cachedChapterViews = new Map<string, EmbeddedViewRef<any>>();
@ViewChild('chapterContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
@ViewChild('poemCardTemplate') cardTemplate!: TemplateRef<any>;

switchChapter(chapterId: string) {
  this.container.clear();
  // 检查是否存在缓存视图
  if (this.cachedChapterViews.has(chapterId)) {
    this.container.insert(this.cachedChapterViews.get(chapterId)!);
    return;
  }
  // 首次渲染，生成视图并存入缓存
  const chapterData = this.getChapterData(chapterId);
  const newView = this.container.createEmbeddedView(this.cardTemplate, { $implicit: chapterData });
  this.cachedChapterViews.set(chapterId, newView);
}

注意：若章节数据更新，需删除对应缓存并重新渲染，避免内存泄漏和数据不一致。

2. 用DomPortalOutlet缓存DOM片段 #

把每个章节渲染完成的完整DOM片段缓存到内存，切换时直接替换容器内的内容。这种方式更直接，若用Angular指令绑定事件，缓存视图仍受Angular管理，无需额外处理；若为手动绑定事件，需注意清理与复用逻辑。

二、其他性能优化手段 #

除缓存视图外，这些手段也能大幅降低渲染开销：

• 开启OnPush变更检测：给卡片组件设置changeDetection: ChangeDetectionStrategy.OnPush，仅当输入属性变化或手动触发markForCheck()时才更新，减少不必要的变更检测与渲染。

• 自定义动态高度虚拟滚动：虽然CDK虚拟滚动不支持动态尺寸，但可自行实现简易版：监听滚动容器的滚动事件，计算可见区域范围，只渲染可见区域及前后1-2屏的卡片，同时根据已渲染卡片的实际高度动态设置滚动容器总高度。这种方式能把同时渲染的DOM数量从几百降到几十，性能提升显著。

• 延迟加载非关键内容：评论区、分享按钮这类非首次必须显示的内容，用IntersectionObserver监听卡片进入视口后再渲染。比如给评论区加ngIf，当卡片可见时再加载：

// 卡片组件内
ngAfterViewInit() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.showComments = true;
        observer.disconnect();
      }
    });
  });
  observer.observe(this.cardElement.nativeElement);
}

• 给*ngFor加trackBy函数：指定唯一标识让Angular复用DOM元素，减少切换列表时的DOM销毁与重建：

<mat-card *ngFor="let poem of currentChapterPoems; trackBy: trackPoemId">
  <!-- 卡片内容 -->
</mat-card>

trackPoemId(index: number, poem: Poem) {
  return poem.id; // 用诗句的唯一ID作为跟踪标识
}

• 简化DOM结构：尽量减少卡片内的嵌套层级，把不必要的Angular指令换成CSS控制（比如用display: none代替*ngIf，当内容结构不变时），降低模板复杂度。

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