Angular 4/5 DOM更新与变更检测：DOM更新机制及批量处理疑问

好问题！我来一步步拆解Angular变更检测定位到需更新组件后的完整流程，以及背后的机制：

1. 组件视图的绑定对比阶段 #

当变更检测系统定位到某个组件需要更新（比如绑定的属性值发生变化），首先会进入该组件的视图检查环节：

• Angular会遍历组件模板中所有的绑定表达式（包括插值{{user.name}}、属性绑定[disabled]="isDisabled"、样式绑定[style.color]="textColor"等）。
• 它会将当前组件实例的属性值，和上一次变更检测时缓存的旧值做对比。如果发现值不相等，就会标记这个绑定对应的DOM节点需要更新。

2. DOM更新的通知与执行机制 #

一旦确定了需要更新的DOM内容，Angular不会直接手动操作DOM，而是通过封装好的渲染器来完成：

• 核心依赖是Renderer2（Angular提供的抽象渲染层），它会把具体的DOM操作（比如修改文本内容、设置属性、添加样式）封装成统一的API。
• 变更检测系统会将所有需要更新的指令传递给渲染器，由渲染器负责通知并执行实际的DOM修改。这种设计的好处是让Angular可以跨平台运行（比如浏览器DOM、服务器端渲染、Web Worker环境），而不用关心底层DOM的差异。

3. 批量DOM变更的实现逻辑 #

是的，Angular会等待整个变更检测周期结束后，再批量执行所有DOM变更：

• 变更检测是按组件树从上到下同步执行的，在一个周期内，Angular会完成所有组件的绑定检查，收集所有需要的DOM更新操作。
• 只有当整个组件树的变更检测都完成后，才会一次性把所有收集到的DOM更新应用到页面上。这种批量处理能有效减少浏览器的重排重绘次数，避免频繁DOM操作导致的性能损耗。

补充：OnPush策略下的特殊情况 #

如果组件使用了ChangeDetectionStrategy.OnPush，触发变更检测的条件会更严格（比如输入属性引用变化、组件内部调用markForCheck()、组件或子组件触发事件），但一旦进入变更检测流程，后续的绑定对比、DOM更新、批量执行的逻辑和默认策略完全一致。

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