直接打开DevTools的Network面板刷新页面,找到index.html请求,若状态码为200 (from disk/memory cache)且Cache-Control有效,则强缓存命中;若为304则协商缓存生效;仅当状态码为200 OK且响应体含新版本标识才确认获取到新HTML。

直接看 Network 面板里 index.html 请求的响应头和状态码,不是看页面渲染结果,也不是靠刷新几次。
怎么看 index.html 是否命中强缓存
打开 DevTools → Network → 刷新页面 → 找到 index.html 请求(注意不是 JS/CSS)→ 点开看 Response Headers:
- 如果看到
Cache-Control: max-age=86400且状态码是200 (from disk cache)或200 (from memory cache),说明浏览器根本没发请求,强缓存还在生效,你看到的一定是旧 HTML - 如果状态码是
304 Not Modified,说明协商缓存生效了,服务器确认没变,返回空体,浏览器继续用旧 HTML - 只有状态码是
200 OK且响应体内容里能看到新版本标识(比如更新后的window.__APP_VERSION或新script的哈希),才算真正拿到了新 HTML
为什么 /version.json 必须绕过所有缓存
很多项目用它做离线更新检测,但一旦这个端点被 CDN 缓存或浏览器强缓存,比对逻辑就失效了:
-
/version.json响应头必须含Cache-Control: no-cache, must-revalidate,不能只写no-cache - Nginx 配置要显式加
add_header Cache-Control "no-cache, must-revalidate";,否则可能被 upstream 覆盖 - 前端
fetch('/version.json', { cache: 'no-store' }),不能用cache: 'default'或'force-cache' - CDN 控制台必须将
/version.json路径设为“绕过缓存”,不能依赖默认策略或通配规则
CDN 缓存是否干扰 HTML 更新
CDN 不是开关,是放大器——它会把源站的缓存行为放大到全球边缘节点:
立即学习“前端免费学习笔记(深入)”;
- 源站返回
Cache-Control: max-age=3600,CDN 就会按这个时间缓存;哪怕你源站已更新,用户仍从 CDN 拿旧 HTML - 在 Cloudflare 查
x-cache: HIT、在阿里云查x-cdn-cache: HIT,如果显示命中,且你刚发了版,那问题八成出在 CDN 缓存没清或配置不对 - 关键路径如
/index.html、/app.js在 CDN 控制台必须单独设为“缓存 TTL = 60s”或“绕过缓存”,不能指望全局默认策略 -
<meta http-equiv="Cache-Control">对 CDN 和浏览器都无效,别写,写了也白写
最容易被忽略的是:HTML 文件本身没进 Service Worker 缓存,或者进了但没用绝对路径、没在 cache.addAll() 里显式声明——离线时直接白屏,连报错都没有。



















