Angular中ngFor内部嵌套异步请求的最佳实践有哪些？

问题分析 #

你当前的写法在列表规模增长时确实会引发卡顿，核心问题有两个：

• Angular 变更检测会在每一轮触发时重新执行模板中绑定的getImagePath(car)方法，每次都会返回一个全新的 Observable，async管道会反复订阅、取消订阅，不仅会重复发起大量重复的图片地址请求，还会造成不必要的内存开销
• 如果*ngFor没有加trackBy优化，列表数据更新时会全量销毁重建DOM节点，进一步放大性能问题

优化方案 #

1. 新增本地缓存避免重复请求 #

在组件内维护一个缓存Map，存储已经请求过的carId对应的图片地址Observable，同一个carId只会发起一次请求：

// 组件内新增缓存
private imageUrlCache = new Map<number, Observable<string>>();

getImagePath(car: {carId: number}): Observable<string> {
  // 已缓存直接返回
  if (this.imageUrlCache.has(car.carId)) {
    return this.imageUrlCache.get(car.carId)!;
  }
  // 未缓存则发起请求并存入缓存
  const url$ = this.yourStorageService.getDownloadURL(car.carId).pipe(
    shareReplay(1) // 多订阅共用同一份结果，不会重复请求
  );
  this.imageUrlCache.set(car.carId, url$);
  return url$;
}

2. 给*ngFor添加trackBy优化DOM重绘 #

// 组件内加trackBy方法
trackByCarId(index: number, car: {carId: number}): number {
  return car.carId;
}

模板中修改*ngFor写法：

<div *ngFor="let car of cars; trackBy: trackByCarId">
    <img [src]="getImagePath(car) | async" loading="lazy">
</div>

这里额外给img加了原生的loading="lazy"属性，非视口内的图片会延迟请求，进一步减少首屏压力。

3. 进阶预加载优化（可选） #

如果你的cars列表是一次性从Firestore拉取到的，可以在拿到列表后直接预生成所有图片的Observable数组，完全避免模板方法调用的开销：

carsWithImage$: Array<{car: {carId: number}, imageUrl$: Observable<string>}> = [];

// 拿到cars列表后处理
this.carsService.getCars().subscribe(cars => {
  this.carsWithImage$ = cars.map(car => ({
    car,
    imageUrl$: this.getImagePath(car)
  }));
});

模板直接遍历预生成的数组：

<div *ngFor="let item of carsWithImage$; trackBy: trackByCarId">
    <img [src]="item.imageUrl$ | async" loading="lazy">
</div>

以上优化做完后，即使列表增长到数百条也不会出现卡顿，同时也满足你不需要把downloadURL存入Firestore的需求。

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