01 循环计算的坑与误区
01.1 模板中的重复计算成本
在 Angular 中，模板表达式会在每次变更检测时执行，这意味着如果把循环计算、数组映射或筛选直接放在模板里，UI 的重绘成本会显著提升。
解决思路是将耗时的运算搬到组件类中，通过缓存结果或者使用纯函数/纯管道来避免模板中的重复计算，从而降低每次检测的工作量。
// 坏的做法：在模板中直接进行耗时运算
// 模板：{{ items.map(i => i.value * scale).length }}
一个更高效的做法是将结果在组件中预先计算，并在变更时触发重新计算，模板只负责展示，从而实现更稳定的性能曲线。
// 好的做法：在组件中缓存
getVisibleCount(): number {return this.items.filter(i => i.visible).length;
}
01.2 ngFor 循环中的重复工作
在 *ngFor 循环中如果频繁创建新数组或在模板中执行复杂对象构造，变更检测次数和 DOM 更新成本会增加，造成页面滚动或交互卡顿。
使用 trackBy 函数来帮助 Angular 识别列表项的身份，可以显著减少 DOM 的创建与销毁次数，同时应避免在模板内放置复杂计算逻辑。
// 典型的 trackBy 实现
trackById(index: number, item: Item) {return item.id;
}
通过将标识交给 TypeScript 端处理、并在模板中仅使用简单绑定，可以获得更平滑的滚动体验。
// 模板示例
<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}
</div>
02 数组操作在 Angular 中的最佳实践
02.1 避免在模板中对数组进行复杂运算
直接在模板中对数组执行 map、filter、reduce 等操作，会在每次变更检测时重新创建新数组，带来额外的内存和 CPU 成本。
最佳实践是将运算放到组件或服务中完成，并在需要时把结果绑定到模板，必要时使用 纯管道 来缓存计算结果。
// 坏示例（模板中耗时运算）
<div>{{ items.map(i => i.value * scale).length }}</div>
// 好做法（在组件中计算）
visibleCount: number;
updateVisibleCount() {this.visibleCount = this.items.filter(i => i.visible).length;
}
结合 async pipe 与 RxJS，可以将数据流推送到模板，减少手动轮询的成本并提升可维护性。
// 使用 RxJS 与 async 管道
items$ = new BehaviorSubject([]);
this.items$.pipe(map(list => list.filter(i => i.active))
).subscribe(/* 绑定到模板 */);
02.2 使用不可变数据与 RxJS 流
采用不可变数据模式可以让变更检测更易预测，减少不必要的比较；配合 RxJS 数据流，可以把数据处理逻辑与视图渲染解耦。
通过将数据流转为新的数组后再传递给视图，模板仅对新的引用触发变更，从而降低渲染成本。
// 使用不可变数据与 stream
items$ = this.http.get('/api/items').pipe(map(list => list.filter(i => i.active)),shareReplay({ refCount: true, bufferSize: 1 })
);
03 性能优化策略与实战技巧
03.1 使用 Track By 函数提升 ngFor 性能
在大量列表渲染的场景下，Track By 可以显著降低重新创建 DOM 的代价；若未使用 Track By，Angular 会逐项比较并重新渲染，导致卡顿。
将唯一标识作为 Track By 的返回值，可以避免不必要的节点销毁与创建，从而提升滚动与切换的流畅度。
// 组件端
ngFor="let item of items; trackBy: trackById"
trackById(index: number, item: Item) {return item.id;
}
03.2 OnPush 策略和纯管道
使用 ChangeDetectionStrategy.OnPush 可以让 Angular 只在输入引用发生变化、事件或异步操作完成时才进行变更检测，显著降低检查次数。
结合 纯管道，可以确保管道输出在同一输入引用不变时不会重复计算，进一步降低成本。
@Component({selector: 'app-item-list',templateUrl: './item-list.component.html',changeDetection: ChangeDetectionStrategy.OnPush
})
export class ItemListComponent { /* ... */ }
03.3 虚拟滚动和分片加载
对于大型列表，虚拟滚动（cdk-virtual-scroll-viewport）能让页面一次只渲染可视区内的项，减少 DOM 节点数量，提升滚动性能。
配合服务端分页，可以在前端实现流畅的无限滚动，同时保障初次渲染的速度。
<cdk-virtual-scroll-viewport itemSize="50" class="viewport"><div *cdkVirtualFor="let item of items" class="item">{{item.name}}</div>
</cdk-virtual-scroll-viewport>
04 实战示例：从数据源到视图的高效循环
04.1 现实数据流的处理与预处理
在真实应用中，数据往往来自服务端或缓存层，通过 RxJS 管道对数据进行筛选、排序再绑定到视图，能有效控制渲染成本。
结合 OnPush、Track By 以及 async 管道，可以实现一个低耦合、可维护的循环渲染方案。
// 数据流示例
this.items$ = this.http.get('/api/items').pipe(map(list => list.filter(i => i.active)),shareReplay({ refCount: true, bufferSize: 1 })
);
04.2 使用分页和缓存减少渲染压力
对大数据集实施服务器端分页和前端缓存，可以有效降低单次渲染的工作量；分页控件与缓存策略应与数据流一致，避免重复拉取和重复渲染。
在前端实现分页时，确保只对当前页的数组执行循环和渲染，避免一次性加载所有项导致的性能瓶颈。
getPage(page: number) {return this.api.getItems({ page, size: 50 }).subscribe(setPage);
}
