Stale-While-Revalidate 实现快速网页加载体验

Stale-While-Revalidate（SWR）是一种革命性的缓存策略，它彻底摒弃了传统“等待网络响应”的加载范式——页面首次渲染直接使用本地缓存内容，同时在后台静默发起数据更新，让用户从点击到滚动全程零感知等待；尽管原生支持仅限于较新版本的Chrome和Firefox，但通过Service Worker手动实现或借助Vue/React等框架的SWR库（如TanStack Query），开发者可精准控制staleTime、cacheTime等参数，结合预缓存、导航预加载等PWA最佳实践，真正实现“有旧用旧、有新换新、无缝过渡”的极致用户体验，让“加载中”成为历史。

Stale-While-Revalidate（SWR）不是“更快地等网络”，而是彻底取消等待——页面首次渲染用缓存，用户开始滚动时新数据已在后台就位。它把“加载”这个概念从用户感知中移除，是渐进式网页加载（PWA）真正落地的关键一环。

服务端必须正确声明 SWR 响应头

HTML 文件本身无法启用 SWR，meta 标签完全无效。必须由后端在 HTTP 响应头中明确设置：

• Cache-Control: max-age=30, stale-while-revalidate=300 —— 表示资源新鲜期 30 秒，过期后 5 分钟内仍可直接返回缓存并后台验证
• 仅对 destination === 'document'（如首页导航）或 'json'（如 API 请求）生效；