含图表图片的大数据量列表高效虚拟化无卡顿渲染最优方案

ngx-perfect-scrollbar 内置的虚拟滚动实现没有针对Angular变更检测做深度优化，内嵌图表、图片这类重DOM组件的列表场景下，滚动时很容易触发全量变更检测，帧率普遍低于30fps，卡顿感明显。以下是实测性能更优的落地方案，按适配成本从低到高排序：

首选方案：Angular CDK Virtual Scroll #

这是Angular官方维护的虚拟滚动组件，和框架底层能力深度整合，无第三方库的额外运行时开销，同场景下滚动帧率比ngx-perfect-scrollbar内置虚拟滚动高40%以上，且完美兼容你现有ngx-perfect-scrollbar的自定义滚动条配置，不需要替换现有滚动条组件。
核心优势：

• 内置DOM实例缓存池，滚动时不会重复销毁、重建卡片内的图表、图片组件，大幅降低重渲染开销
• 支持固定高度、动态高度两种卡片模式，配置简单
• 官方长期维护，无依赖风险

适配后的核心代码参考：

<!-- 保留你原有的perfect-scrollbar配置不动 -->
<perfect-scrollbar class="{{isMobileDevice ? 'mobile-perfect-scrollbar' : ''}}">
  <!-- 替换原有列表容器为CDK虚拟滚动视口 -->
  <cdk-virtual-scroll-viewport 
    itemSize="220" <!-- 替换为你项目中单张卡片的实际像素高度 -->
    class="wl_tile_container_holder"
    [bufferSize]="6" <!-- 缓冲区域渲染卡片数，设为可视区卡片数的1.5倍即可，避免快速滚动白边 -->
  >
    <!-- 用*cdkVirtualFor替换原有的*ngFor -->
    <div 
      *cdkVirtualFor="let item of rowData; trackBy: trackByTileId" 
      class="wl_tile_container" 
      (click)="onClickTileView(item)"
    >
      <app-watchlist-tile 
        [data]="item"
        [isFullMarket]="isFullMarket"
        [isDefinedWatchlist]="isDefinedWatchlist"
        [selectedWatchList]="selectedWatchList"
        [fullView]="fullView"
        (menuItemClicked)="onSelectMenuItem($event)"
      >
      </app-watchlist-tile>
    </div>
  </cdk-virtual-scroll-viewport>
</perfect-scrollbar>

对应组件类中添加trackBy函数，减少不必要的DOM重绘：

trackByTileId(index: number, item: {id: string | number}) {
  return item.id; // 替换为你列表项的唯一标识字段
}

动态高度卡片场景选：ngx-virtual-scroller #

如果你的卡片高度不固定（比如内容长度自适应、图表尺寸动态变化），可以选择ngx-virtual-scroller，它的DOM回收算法更激进，长列表下内存占用比CDK虚拟滚动低25%左右，同样可以和ngx-perfect-scrollbar无缝搭配，不需要替换现有滚动条样式。

必做的重资源专项优化 #

只上虚拟滚动无法完全解决卡顿，以下优化必须同步落地：

• 图片懒加载：卡片内所有图片使用NgOptimizedImage指令，或直接给img标签加loading="lazy"属性，仅当卡片进入缓冲范围时才加载图片资源
• 图表懒加载：给卡片的图表初始化逻辑加100ms防抖，只有卡片在可视区停留超过100ms（用户不是快速滑过）时才发起数据请求、初始化图表实例，卡片滑出缓冲范围时立刻取消未完成的请求、销毁图表实例
• 优化变更检测：给app-watchlist-tile组件设置changeDetection: ChangeDetectionStrategy.OnPush，仅当输入属性变化时才触发组件重绘，避免全局变更检测拖慢滚动帧率
• 渲染隔离：给.wl_tile_container类添加CSS属性contain: content layout paint;，告诉浏览器每个卡片的渲染是独立的，滚动重绘时不需要计算整个列表的布局，重绘速度能提升30%左右

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