Lighthouse 与 DevTools
lighthouse、devtools-usage。
25 分钟
Lighthouse 与 DevTools
跨平台前端最终都要回答：够快吗、够稳吗、够「像 App」吗？ Lighthouse 给可重复的审计分数；Chrome DevTools 给请求、缓存、SW、内存的实况——与 http-protocol-essentials 的 Network 视角互补。
学习目标
- 解读 Lighthouse 中 Performance、PWA、Accessibility 等类别
- 用 DevTools Application / Network 排查 SW 与缓存问题
- 对照路线图 lighthouse、devtools-usage 节点
Lighthouse 快速跑分
DevTools → Lighthouse → 选 Mobile/Desktop、Categories → Analyze
或 CLI（适合 CI）：
npx lighthouse https://coderoadmap.cn/tracks --only-categories=performance,pwa --view
| 类别 | 跨平台相关关注点 |
|---|---|
| Performance | LCP、CLS、TBT；移动网络下 cpf-mobile 首屏 |
| PWA | Manifest、SW、HTTPS、响应式（cpf-pwa） |
| Accessibility | 触控目标、对比度（html-css-essentials） |
| Best Practices | HTTPS、控制台错误、图片宽高 |
分数是 趋势工具，不是 KPI 崇拜——改一项指标可能伤害另一项，需结合产品目标。
DevTools 关键面板
Network
- 禁用缓存 + 节流 Fast 3G，模拟移动
- 看 http-caching 头：
Cache-Control、ETag Size列区分 disk cache / SW / network
Application
- Manifest：字段是否生效
- Service Workers：状态、skipWaiting、Offline 勾选
- Storage：Local / IDB 是否膨胀（cpf-webapis）
Performance
- 录一段滚动 tracks 列表，找 Long Task 与布局抖动