图片、字体与网络预算
picture/srcset、字体加载和资源优先级影响首屏；实验记录固定网络下 waterfall。
核心机制与实现
响应式与 PWA 的核心是让布局、网络、安装能力和离线数据在不同设备上优雅退化。每个能力都要定义最低可用路径、缓存一致性和失败恢复，而不是只追求 Lighthouse 分数。
本篇的主题“图片、字体与网络预算”要拆成四个问题：输入从哪里来、谁拥有它、什么时候产生副作用、失败后如何恢复。先画出输入 → 派生 → 视图/副作用的链，再决定 API；这样可以避免把框架语法当成业务状态模型。
ts
const media = matchMedia('(prefers-reduced-motion: reduce)')
const online = navigator.onLine
window.addEventListener('online', () => syncQueue())逐行阅读上面的最小例子：第一行建立可观察或可配置的输入，第二行定义派生/事件边界，最后一行才把结果交给视图或副作用。实际项目中还要补上类型、取消、清理和错误状态，不能只验证成功路径。
本节专属实验：验证在线与离线转换
在 DevTools 中切换 Offline，分别记录页面启动、写入队列、恢复网络和 Service Worker 更新时的状态。每次状态转换都要有用户可见反馈，不能只依赖缓存命中。
js
window.addEventListener('online', () => console.log('online'))
window.addEventListener('offline', () => console.log('offline'))预期：离线写入进入可重放队列，恢复后按幂等策略发送；新旧 worker 版本同时存在时必须明确控制更新和回滚。
可运行实验
- 在窄屏、键盘、慢网和离线条件下跑同一条用户任务。
- 对静态资源、导航请求和写操作分别选择缓存策略，记录命中与失效。
- 验证安装、更新、回滚、队列重放和减少动态效果设置。
实验记录至少包含：环境版本、输入序列、预期结果、实际结果、失败截图或日志，以及修复后再次运行的结果。
练习
- 用自己的话画出本篇概念的依赖图，并标出一个可能产生重复执行或竞态的节点。
- 写一个最小测试覆盖成功、失败、取消/卸载三条路径；测试应断言可观察结果，而不是内部实现调用次数。
- 给出一个选择当前方案而不是替代方案的理由，并写下替代方案何时更合适。
下一步
完成练习后阅读本章答案。