OnPush策略与ChangeDetectionRef：高频问题、回答框架、公司侧重点
本章聚焦变化检测触发机制与显式控制手段，面试中高频考察候选人对ChangeDetectionStrategy.OnPush的理解深度、ChangeDetectorRef的精细使用场景，以及如何结合Immutable数据流进行性能优化。公司侧重点从“是否会开OnPush”到“是否懂得设计可预测的触发路径”递进。
📊 策略对比表
| 维度 | Default | OnPush |
|---|---|---|
| 触发条件 | 任何组件树变更 | 仅 @Input 引用变化 / 事件 / Observable 触发 |
| 性能开销 | 高，全树遍历 | 低，仅检查标记分支 |
| 依赖项 | 无约束 | 要求不可变数据或显式标记 |
| 适用场景 | 小型应用、快速原型 | 大型列表、动态表格、实时数据流 |
| 调试复杂度 | 低 | 中等，需理解引用变化 |
📇 面试问答卡片
🔹 卡片1：OnPush策略的基础原理
面试问题： 请解释Angular的变化检测策略Default与OnPush的区别，以及OnPush在什么条件下触发检测？
⭐ 面试官考察点：
- 是否理解引用变更与属性变更的区别
- 是否知道事件、Observable、@Input引用变化、async pipe等触发场景
- 能否清晰对比两种策略的优缺点
📐 回答框架：
- 定义：Default每次异步事件后全组件树检查；OnPush只检查标记为脏的分支。
- 触发条件：@Input引用改变、组件内事件、Observable订阅、手动调用markForCheck。
- 优势：减少无用检查，适合大型列表/频繁更新场景。
- 注意点：对象内属性变化不触发，需不可变数据或显式触发。
💬 简短示例回答：
Default策略每次Zoneless事件后会遍历所有组件做脏检查；OnPush只当@Input引用变化、组件自身事件、或显式调用markForCheck时才检测。我曾在报表系统中将所有列表组件设为OnPush，同时结合Immutable.js保证输入变更时创建新引用，渲染性能提升约60%。🔎 可能追问：
- 如果对象属性改变了，但引用没变，如何让视图更新？（答：手动markForCheck或使用不可变库）
- OnPush与ChangeDetectionRef.detach()有什么关联？
⚠️ 避坑提醒： 不要回答“OnPush只检查当前组件”，它实际上还能通过事件向上冒泡触发祖先检查。另外，不要混淆detach和OnPush——OnPush是策略，detach是运行时控制。
🔹 卡片2：ChangeDetectorRef的精细控制
面试问题： 你在项目中如何使用ChangeDetectorRef进行性能优化？请举例说明markForCheck、detach、reattach、detectChanges的适用场景。
⭐ 面试官考察点：
- 是否区分四种方法的使用时机
- 是否有过真实优化案例，而不是背API
- 能否平衡性能收益与代码复杂度
📐 回答框架：
- 先列出四种方法：markForCheck（标记当前及祖先为脏）、detach（停止检查）、reattach（恢复）、detectChanges（立即执行一次检查）。
- 举例：大表格中，当滚动窗口只显示50行时，detach其他行组件，仅对可见行调用markForCheck。
- 说明风险：detach后需手动管理检查时机，容易遗漏更新。
- 强调与OnPush配合：OnPush组件内调用markForCheck是开发者主动“报警”。
💬 简短示例回答：
我在实时看板系统中使用ChangeDetectorRef.detach()将离线面板暂停检查，当WebSocket数据到达时调用reattach()并markForCheck()。针对频繁变化的K线组件，只对发生变化的条目用detectChanges()局部更新，页面帧率从15fps提升到55fps。🔎 可能追问：
- detach之后子组件还能检查吗？（答：子组件也被暂停，因为检查是从父到子流式进行的）
- detectChanges和markForCheck的区别是什么？
⚠️ 避坑提醒： 不要在detach后忘记处理OnPush子组件的更新，因为父detach后子也被冻结。另外，detectChanges要谨慎在ngAfterViewInit之后调用，可能触发ExpressionChangedAfterItHasBeenCheckedError。
🔹 卡片3：与RxJS异步管道的联动
面试问题： 为什么OnPush策略下常推荐使用async pipe？如果不用async pipe，你会怎么处理Observable数据更新？
⭐ 面试官考察点：
- 是否理解async pipe自动触发markForCheck的机制
- 是否知道手动订阅的常见陷阱（未清理、未触发检查）
- 能否写出正确的订阅+标记代码
📐 回答框架：
- async pipe会在每次新值发射时自动调用markForCheck，无需手动管理。
- 手动订阅需在ngOnInit中subscribe，并在回调里调用ChangeDetectorRef.markForCheck()。
- 必须完善生命周期，在ngOnDestroy中unsubscribe防止内存泄漏。
- 推荐在模板中使用async pipe，减少代码量且更安全。
💬 简短示例回答：
在实时消息列表中，我使用async pipe绑定data$。当数据流推送新消息时，async pipe自动触发markForCheck，视图立即更新。如果手动订阅，我会在next回调中调用cd.markForCheck()，并在destroy时取消订阅。async pipe还自动处理了订阅和反订阅，减少模板中的null检查代码。🔎 可能追问：
- 在多级组件中，async pipe是否会向上冒泡触发父组件检查？（答：不会，只标记当前组件为脏）
- 如果使用Subject并调用next，而没有用async pipe，视图为什么不更新？
⚠️ 避坑提醒： OnPush组件中直接使用Subject.next()推送数据，如果没在模板绑定async pipe或手动调用markForCheck，视图永远不会更新。另外，不要在模板中频繁使用| async重复绑定同一个Observable，会创建多个订阅流。
🏗️ 项目案例模板：大型报表性能优化
| 模块 | 内容 |
|---|---|
| 项目名称 | 智能运维监控大盘 |
| 业务背景 | 可视化展示200台服务器实时指标（CPU、内存、网络），每5秒刷新一次，包含20+图表组件和滚动告警列表。 |
| 规模指标 | 单个页面80+组件，数据点峰值1.2万/秒，用户同时在线500人，Chrome DevTools性能Tab持续绿色。 |
| 技术栈 | Angular 14 + RxJS + D3.js + WebSocket + ChangeDetectionStrategy.OnPush + Immutable.js + Virtual Scroll（CDK） |
| 核心难点 | ① 高频数据推送导致全量脏检查卡顿；② 列表增量更新需避免重建DOM；③ 手动管理detach后组件恢复检查的边界条件。 |
| 面试高频追问 | - 为什么不用Default？OnPush下如何保证告警列表新消息的红点标记更新？ - 滚动到不可见行时如何暂停检测？ - 使用Immutable.js后的具体写法？ - 如果某个图表数据源异常，如何隔离导致其他图表没受影响的？ |
| 可迁移回答话术 | “我主导了该大盘的OnPush改造：所有数据展示组件设为OnPush，并将WebSocket数据流通过RxJS操作符做分块处理，每块使用map生成新引用。针对不可见图表组件，我调用cd.detach()并在可见时reattach()。对于告警列表，使用TrackBy函数配合Virtual Scroll只渲染可见行，同时在新告警到达时通过cd.markForCheck()驱动局部检查。最终首次加载时间从4.2s降至1.8s，CPU占用降低70%。” |