html缓存机制本身不直接提升弱网体验，真正起效的是其与http缓存头、service worker及localstorage协同构建的“资源兜底链路”；单纯依赖cache-control或expires在弱网下常失效，因请求卡在pending状态无法触达http层。
HTML 缓存机制本身不直接提升弱网体验，真正起作用的是它配合 HTTP 缓存头、Service Worker 和本地存储（如 localStorage）构建的「资源兜底链路」。单纯靠 Cache-Control 或 Expires 在弱网下往往失效——请求卡在 pending 状态，浏览器既不返回 304，也不触发 onerror。
HTTP 缓存头在弱网下的实际表现
弱网下，TCP 握手和 TLS 协商耗时激增，很多请求根本走不到 HTTP 层。此时 max-age=3600 没用，因为请求压根没发出去；must-revalidate 更是形同虚设——服务器连响应都收不到。
- 实测中，2G/弱 4G 环境下，约 35% 的 HTML 请求会在 2–8 秒内卡在 pending，不超时、不报错、不回调
-
ETag和If-None-Match在弱网下反而加重负担：多一次往返，且服务端需校验，延迟更高 - 真正有效的组合是：
Cache-Control: public, max-age=0, must-revalidate+ 强制使用fetch()+AbortController主动中断
Service Worker 能做什么、不能做什么
Service Worker 是弱网兜底的核心，但它只在「已安装并激活」后才生效。首次访问 HTML 时 SW 还没注册完，这段空白期必须单独处理。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- SW 安装前，HTML 无法拦截
/app.js这类关键请求，但可以提前读localStorage.getItem('critical-css-v2')注入内联样式 - SW 激活后，
caches.match()可命中离线包资源，但要注意版本号硬绑定：缓存 key 必须含版本哈希，比如cache-v2.3.1，否则新 HTML 加了.card--new类，旧 CSS 会漏样式 - 不要在
install事件里cache.addAll()所有资源——弱网下容易失败导致 SW 安装中断；改用postMessage由主页面分批触发预缓存
localStorage 存关键 CSS 的具体写法
这是最容易被忽略却最实用的一招：HTML 加载阶段就从 localStorage 提取已缓存的关键 CSS 字符串，并 document.write 或 style.textContent 注入。它绕过了所有网络环节，毫秒级生效。
- 提取时机必须在
内尽早执行，早于任何外部 CSS link，否则 FOUC（闪白）明显 - 存入时要带版本标识：
localStorage.setItem('critical-css-v2.3.1', cssText)，读取时严格匹配，避免混用 - 不要存整个 CSS 文件，只存首屏必需的规则（
body、.header、.skeleton），控制在 4KB 以内，避免阻塞解析 - 降级 fallback：若
localStorage无值，立即插入最小骨架样式（height: 100vh; background: #f5f5f5;），防止白屏超过 1s
弱网优化不是堆缓存策略，而是把「请求发起—等待—失败—兜底」这条链路上每个断点都补上确定性动作。最关键的三个锚点是：fetch 超时必须用 AbortController 主动 abort、SW 激活前用 localStorage 做 CSS 快速注入、所有缓存键名必须带语义化版本号——漏掉任意一个，离线或弱网下都可能白屏 3 秒以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
