第3章 变化检测机制与Zone.js：高频问题、回答框架、公司侧重点
变化检测是 Angular 性能优化的核心瓶颈。Zone.js 负责通知 Angular“发生了什么”，而 Angular 借此触发脏检查。面试官通常从“如何减少检测次数”切入，考察你对 OnPush 策略、ChangeDetectorRef.detach / reattach、以及 Observable 异步管道 的实际应用能力。
高频面试问题 · 问答卡片
Q1：Angular 的变化检测是怎么触发的？Zone.js 扮演了什么角色？
| 考察点 | 是否理解 Zone.js 的猴子补丁机制；能否说清“异步事件→Zone.js 通知→脏检查”链路；对 NgZone 脱离变化检测的能力。 |
| 回答框架 | 1. Zone.js 重写 setTimeout/事件/HTTP 等异步 API；2. 每当异步操作完成时，Zone 触发 Angular 的 ApplicationRef.tick()；3. 从根组件开始向下遍历所有绑定，对比新旧值；4. 可通过 NgZone.runOutsideAngular() 避免无意义的检测。 |
| 示例回答 | Zone.js 通过猴子补丁拦截所有浏览器异步 API，当 setTimeout、HTTP 或事件触发时，Zone 通知 Angular 调用 tick() 从根组件开始脏检查。如果确认操作不影响视图（如频繁的滚动计算），可使用 this.ngZone.runOutsideAngular(() => {…}) 跳过检测，显著减少卡顿。 |
| 可能追问 | “NgZone.onMicrotaskEmpty 事件有什么用？”、“能否自己实现一个简化的 Zone？” |
| 避坑提醒 | 不要只说“Zone.js 负责变化检测”这种模糊结论。一定要讲清楚“拦截异步 → 触发脏检查”的两步，以及如何脱离 Zone 来优化性能。 |
Q2：OnPush 变化检测策略的工作原理是什么？什么场景必须用 OnPush？
| 考察点 | OnPush 的触发条件（只有 @Input 引用变化 / 组件自身事件 / Observable 异步管道才会检测）；是否理解不可变数据与 OnPush 的配合。 |
| 回答框架 | 1. 声明 changeDetection: ChangeDetectionStrategy.OnPush；2. 仅在以下情况触发检测：@Input 引用改变、组件内事件、使用 | async 的 Observable 发出新值；3. 需配合不可变更新（如 Immutable.js 或展开操作符）避免“数据变了但引用没变”；4. 若需要手动触发，调用 ChangeDetectorRef.markForCheck()。 |
| 示例回答 | OnPush 策略只在 @Input 引用变化、组件内事件、或异步管道收到新值时触发检测。我曾在复杂表单中为每个字段组件启用 OnPush，配合 markForCheck() 仅在输入值改变时更新，将检测次数从每帧数千次降到几十次，大幅提升打字流畅度。 |
| 可能追问 | “标记为 OnPush 但父组件传了可变对象，怎么保证变更被检测？”、“markForCheck 和 detectChanges 区别？” |
| 避坑提醒 | 新人常犯错误：用了 OnPush 但修改对象属性（非替换引用）导致视图不更新。一定要强调“引用不可变”的原则，如果用 mutable 数据需配合 markForCheck。 |
Q3：如何手动控制 ChangeDetectorRef 来避免不必要的检测？
| 考察点 | 是否掌握 detach() / reattach() / detectChanges() / markForCheck() 的适用场景；能否结合具体业务说出何时应该“暂停检测”。 |
| 回答框架 | 1. 场景：大量高频更新（如实时图表、WebSocket 数据流）；2. 方案：constructor 中 this.cdr.detach()，然后仅在收到新数据时执行 this.cdr.detectChanges()；3. 若使用 OnPush 但需要定期检测，用 markForCheck() 将组件及其祖先标记为待检测；4. 组件销毁前重新 reattach() 避免内存泄漏。 |
| 示例回答 | 在实时行情列表中，我用 this.cdr.detach() 暂停默认检测，每秒通过 WebSocket 推送 30 条更新时，只对当前可视行调用 this.cdr.detectChanges()，而隐藏行不检测。结果渲染帧率从 15fps 提升到 55fps。 |
| 可能追问 | “detach 后 ngOnChanges 还会触发吗？”、“父子组件都 detach 会有什么问题？” |
| 避坑提醒 | 不要滥用 detach，否则可能漏掉关键视图更新。一定要配套 ngOnDestroy 中 reattach 或清理订阅，尤其当组件被 *ngIf 动态销毁时需注意。 |
项目案例章节
真实项目模板：智能营销后台 · 实时仪表盘
| 业务背景 | 面向电商运营的营销效果实时看板，需要同时展示 PV/UV/转化率等 20+ 指标，每 2 秒从后端推送一次增量数据。 |
| 规模指标 | 页面 8 个嵌套组件，50+ 绑定表达式；每 2 秒更新约 120 条数据；Chrome DevTools 检测最初每帧触发 300+ 次脏检查。 |
| 技术栈 | Angular 14 + NgRx + WebSocket + Highcharts (ngx-charts) + 自定义管道 |
| 核心难点 | WebSocket 高频推送导致整个组件树频繁脏检查，CPU 占用 80%+，图表拖动卡顿；部分指标需要整数位四舍五入，计算更新进一步加剧性能问题。 |
| 面试高频追问 | ① 你选择了 OnPush 还是 detach + detectChanges？为什么？② 如何处理图表组件的数据批量更新？③ 有没有使用 NgZone.runOutsideAngular 优化数据处理？④ 不可变数据你是怎么保证的？ |
| 可迁移回答话术 | “我将每个指标卡片组件设为 OnPush，在 WebSocket 的回调中先用 Immutable.js 生成新 Stats 对象，再通过 NgRx selector 分发；对于图表组件，我调用 this.cdr.detach()，每收到 5 次更新后合并一次 detectChanges()。同时将数据聚合和格式化逻辑放入 runOutsideAngular，避免了 Angular 对临时计算变量的无意义检测。最终 CPU 降至 25%，关键指标做到了实时刷新。” |
💡 面试加分提示： 面试官非常看重“性能优化前后的量化对比”。回答时主动说出“优化前每帧检测 300+ 次，优化后降至 40 次”或“帧率从 15fps 提升至 55fps”这类数字，会让你的回答瞬间脱颖而出。
⚠️ 高频雷区： 不要只背源码结论，例如“Zone.js 重写了 Promise”。面试官期待你结合业务解释“为什么 Promise.then 也会触发变化检测”——因为 Zone.js 把 Promise 也 patch 了，而 Angular 只关心微任务队列中的 tick。另外，在回答 OnPush 时切忌忘记提“| async 管道自动调用 markForCheck”这个关键细节。