Navigation Preload 与 Service Worker 协同加速实践

概述Navigation Preload 允许在 SW 接管导航前并行发起网络请求，解决启动窗口的延迟问题；在 `fetch` 事件中通过 `event.preloadResponse` 获取结果实现无缝协作。实践示例// sw.js self.addEventListener('activate', (event) => { event.waitUntil(self.registration.navigationPreload.enable()) }) self.addEventListener('fetch', (event) => { if (event.request.mode === 'navigate') { const response = (async () => { const preload = await event.preloadResponse if (preload) return preload return fetch(event.request) })() event.respondWith(response) } }) 验证方法Chrome DevTools Application 面板确认 Navigation Preload 启用；Network 观察首个导航请求是否在 SW 启动前并行。对比启用/关闭的 `TTFB/LCP` 指标与请求时序。注意事项仅对导航请求生效；与预缓存策略协同，避免重复下载。若后端需识别预加载请求，可检查 `Service-Worker-Navigation-Preload` 请求头。