Service Worker 优化首屏加载的核心是“有缓存就先用，边展示边更新”，通过预缓存静态资源、导航请求启用 Stale-While-Revalidate、开启导航预加载及协同前端手段（如 preload、代码分割、Brotli 压缩、哈希文件名）实现极致首屏加速。
Service Worker 优化首屏加载速度，核心不是“等资源全回来再展示”，而是“有缓存就先用，边展示边更新”。它通过拦截请求、预存关键资源、并发加载等方式，把用户看到首屏的时间压到最低。
预缓存首屏必需资源
用户第一次访问时没有缓存，秒开无从谈起。必须在 install 阶段主动存好骨架 HTML、主 CSS、核心 JS、Logo 等静态资源：
- 用
caches.open('v1-static')创建专属缓存空间，避免和其他策略混用 -
cache.addAll([ '/index.html', '/css/app.css', '/js/main.js', '/logo.png' ])，URL 必须是绝对路径或相对于 sw.js 的路径 - 包裹在
event.waitUntil()中，确保安装完成前缓存写入完毕 - 不缓存动态 HTML 或接口数据——它们更适合运行时按需缓存
对导航请求启用 Stale-While-Revalidate
首页这类页面请求（request.destination === 'document'）要优先返回缓存，同时后台拉新：
- 在 fetch 事件中第一时间调用
event.respondWith()，否则走默认网络流程 - 用
caches.match(event.request)尝试读缓存；命中则立即返回 - 同时触发
fetch(event.request)后台更新 - 新响应到达后，用
response.clone()分别送浏览器和写入缓存（防止流被消费一次就失效）
开启导航预加载（Navigation Preload）
冷启动时 Service Worker 初始化有延迟，会卡住首屏。导航预加载让浏览器在 SW 启动的同时并发请求资源：
立即学习“Java免费学习笔记（深入）”；
- 注册时调用
registration.navigationPreload.enable() - fetch 事件中优先检查
event.preloadResponse，存在就直接返回 - 没预加载响应时，再回落到 Stale-While-Revalidate 流程
配合其他前端手段协同提效
Service Worker 不是单打独斗的工具，需和页面侧配合才能发挥最大价值：
- HTML 中用
<link rel="preload" as="style">提前拉关键 CSS，缩短渲染阻塞时间 - 拆分代码，把非首屏逻辑（如统计、分享组件）做成动态 import，减少初始 JS 体积
- 服务端开启 Brotli 压缩，配合 SW 缓存压缩后的资源，传输更快
- 静态资源加哈希文件名（如
app.a1b2c3.js），让 SW 能精准按版本管理缓存
