第2章 高频面试问题与回答框架
本章围绕 Angular 性能优化面试中最核心的三个问题，解析面试官考察点、建立结构化回答框架，并提供可直接迁移的示例回答。大厂面试侧重点：字节跳动偏重变更检测实战排查，阿里巴巴关注懒加载与首屏加载指标，美团看重列表渲染与操作流畅度。掌握通用框架可以覆盖 90% 的场景。
面试问答卡片 1：变更检测性能优化
- 面试问题：Angular 应用中，你如何检测和优化变更检测性能？
- 面试官考察点：是否理解 Zone.js、OnPush 策略、ChangeDetectorRef 手动控制，以及是否具备使用 Chrome DevTools / Angular DevTools 排查瓶颈的实战经验。
- 回答框架：① 使用 DevTools Performance 录制定位高频变更检测 → ② 分析组件树，识别触发源 → ③ 将被动组件切换为 OnPush 策略 + 不可变数据 → ④ 对耗时子组件调用 detach() 手动控制 → ⑤ 验证帧率与变更次数改善。
- 简短示例回答：我用 Performance 录制发现列表组件每秒触发 200+ 次变更检测。将子组件改为 OnPush 并约定不可变数据后，帧率从 30fps 提升到 60fps。对图表子组件手动 detach，仅在数据变化时触发检测，减少 70% 无意义变更。
- 可能追问：OnPush 在输入属性引用不变时失效如何解决？detach 后怎么重新 attach？Zone.js 的猴子补丁如何影响性能？
- 避坑提醒：不要只讲概念不说工具；一定要用具体数值或截图作为证据。不要声称 OnPush 解决所有问题，要主动补充其局限性以及不可变数据的约定成本。
面试问答卡片 2：懒加载机制与性能影响
- 面试问题：请解释 Angular 的懒加载机制及其对性能的影响。
- 面试官考察点：是否理解路由懒加载原理、预加载策略、代码分割，以及能否结合实际场景量化首屏收益。
- 回答框架：① 通过 loadChildren 实现功能模块懒加载 → ② 设置 PreloadAllModules 或自定义预加载策略 → ③ 对应 bundle 体积变化 → ④ 首屏加载时间与后续导航体验的平衡。
- 简短示例回答：在电商项目中将商品详情、个人中心等低频模块用 loadChildren 懒加载，首屏 bundle 从 2.3MB 降至 800KB。配合 PreloadAllModules 策略，用户完成首屏交互后自动预加载其他模块，后续导航几乎零延迟。
- 可能追问：如何自定义预加载策略只预加载特定模块？CanLoad 与 CanActivate 在懒加载中的区别？微前端场景下懒加载如何配合？
- 避坑提醒：不能只说“用了懒加载”，要具体说出从多少降到多少。避免忽略预加载带来的额外流量消耗，在弱网环境下要有所权衡。
面试问答卡片 3：渲染性能与 DOM 优化
- 面试问题：如何减少 Angular 应用中的不必要的 DOM 操作？
- 面试官考察点：是否掌握 trackBy、虚拟滚动、纯管道、避免 ngIf/ngSwitch 内复杂计算等常用手段，以及是否考虑过无障碍与滚动体验。
- 回答框架：① 列表渲染必须加 trackBy 函数 → ② 百条以上使用 CDK Virtual Scroll → ③ 将 ngIf 内的复杂计算提前为属性或纯管道 → ④ 避免在模板中调用方法。
- 简短示例回答：对一个 5000 条的消息列表使用 *ngFor+trackBy 按 id 追踪，再替换为 CDK VirtualScroll，DOM 节点从 5000 降到 30 左右。同时将管道改为 pure:true，模板中计算逻辑移到组件属性中，滚动帧率稳定在 60fps。
- 可能追问：虚拟滚动与原生滚动在无障碍上的差异？如何保持滚动位置？trackBy 函数写 return item.id 和 return item 的区别？
- 避坑提醒：不要只提虚拟滚动忽视 trackBy；不要忽略虚拟滚动带来的 tabindex 问题，需要配合 cdkA11y 或手动处理焦点管理。
💡 面试加分提示：每个回答结束后主动补充一句“这个思路在其他项目中也复用解决过类似的性能问题”，展示可迁移思考能力，面试官会额外加分。