Angular中ngFor的渲染机制：逐次还是批量更新DOM？

Angular 的 ngFor 并不会在每一次迭代时就把单个元素逐个插入 DOM。它的处理逻辑是：在一轮变更检测周期内，先完成所有迭代项的模板渲染计算，生成完整的目标 DOM 片段，最后再一次性把整个片段挂载到父容器中。

这么做的核心原因是性能优化——批量 DOM 操作能大幅减少浏览器的重排（reflow）和重绘（repaint）次数，避免频繁操作 DOM 带来的性能损耗。

举个实际场景：假设你有数组 items = ['A', 'B', 'C']，用 *ngFor="let item of items" 渲染 <span>{{item}}</span>，Angular 不会先插入 <span>A</span>，再插 <span>B</span>，而是先把三个 span 节点都生成好，再一次性全部添加到父容器里。

当然，如果你的数据是异步加载的（比如从接口获取），可能会看到“分批”渲染的情况，但这不是 ngFor 逐个插入导致的——而是因为数据返回前，变更检测周期里没有可渲染的内容；等数据返回后，新一轮变更检测才会一次性渲染所有元素。

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