第 3 章 · Angular 高级主题:发动机舱 章节摘要:第 2 章一路埋下的伏笔——OnPush、引用相等、Zone 依赖、检查成本——在本章第 1 节集中兑现:完整拆解变更检测机制(默认策略、OnPush、Zone 与信号两条触发路线)。随后的性能优化是机制拆解的直接工程回报;测试、安全、国际化、CLI、PWA、SSR 六节各自独立成篇,但都能回溯到主线。 学习目标 说出默认变更检测策略的执行模型与 OnPush 的跳过条件(引用变更、输入绑定、手动标记)。 解释 Zone.js 触发与信号触发两条路线的工作原理与取舍。 用 Chrome 性能面板定位变更检测耗时,并应用 trackBy、OnPush、runOutsideAngular、虚拟滚动四类手段。
章节摘要:第 2 章一路埋下的伏笔——OnPush、引用相等、Zone 依赖、检查成本——在本章第 1 节集中兑现:完整拆解变更检测机制(默认策略、OnPush、Zone 与信号两条触发路线)。随后的性能优化是机制拆解的直接工程回报;测试、安全、国际化、CLI、PWA、SSR 六节各自独立成篇,但都能回溯到主线。
金句:前面两章学的是"怎么开",这一章打开引擎盖看"怎么转"。
3.1 变更检测机制深度剖析:全册主峰。默认策略自根向叶的执行模型、OnPush 的三个跳过例外、Zone 与信号两条触发路线的对比。
3.2 性能优化:测量先行,然后是减少检查轮数(脱离 Zone、合并提交)与降低每轮成本(OnPush、trackBy、纯管道、虚拟滚动)两手抓。
3.3 测试:服务测试零设施直测;组件测试用 fixture 驱动,detectChanges 与自动检查的边界。
3.4 安全:Angular 默认净化策略、bypass 的代价、HTTP 层的防护点。
3.5 国际化与本地化:构建期替换与运行期 ICU 消息两种方案,复数与选择语法。
3.6 Angular CLI 高级应用:多项目工作区、生成器原理、代理与构建预算。
3.7 PWA 支持:Service Worker 的缓存策略、版本更新提示、离线数据。
3.8 服务端渲染 SSR:首屏渲染、水合、转移状态避免二次请求。
3.1 是理论核心,3.2 是其应用;3.3 用测试视角回看检查机制;3.4 到 3.8 是五个工程专题,各自从不同边界与主线交汇:
3.1 机制 ──→ 3.2 性能(直接应用) │ ──→ 3.3 测试(fixture 即检查驱动器) │ ──→ 3.8 SSR(服务端首轮检查) 3.4 安全 / 3.5 i18n / 3.6 CLI / 3.7 PWA(工程边界专题,可按需跳读)
本章考核以"机制能不能讲清、手段能不能落地"为准,八节各一条:
| 考核点 | 达标标准 |
|---|---|
| 3.1 执行模型 | 默写默认策略自根向叶的检查顺序,说出 OnPush 组件仍会被检查的三种例外并各举一例 |
| 3.2 性能诊断 | 用性能面板区分"检查频率问题"与"单轮成本问题",并分别开出对应处方 |
| 3.3 测试设施 | 解释 fixture 自动检查与手动 detectChanges 的边界,写出绕过 Zone 的测试方案 |
| 3.4 安全边界 | 说出默认净化策略拦截与放行的内容类别,以及三种绕过方法各自的攻击面 |
| 3.5 国际化 | 为含复数与选择的文案写出 ICU 消息,并说明构建期与运行期方案的取舍 |
| 3.6 工程化 | 解释生成器的执行机制,配置一次开发代理与构建预算 |
| 3.7 离线 | 为静态资源与应用数据分别配置缓存策略,说明版本更新的提示流程 |
| 3.8 渲染 | 描述服务端渲染、水合、客户端接管三阶段中变更检测各自的形态 |
前置:第 2 章全部,尤其是 2.5(管道纯度、trackBy)、2.8(异步触发)、2.9(两条状态路线)。后续:第 4 章讲工具时会用到 3.2 的性能面板结论;第 5 章实战项目直接采用本章的优化与测试组合。