直接看Network面板中index.html的响应状态和响应头：200(from memory/disk cache)说明未发请求，304说明协商缓存未更新，200含max-age则HTML被强缓存；若Service Worker接管，需检查Application面板中SW更新、缓存名变更及清理逻辑；CDN或Nginx可能覆盖响应头，须curl直查真实Header；HTML未进SW缓存或路径非绝对将导致离线白屏或模块加载失败。
HTML缓存机制“失效”通常不是真失效，而是你预期它该更新时没更新——问题几乎总出在缓存策略错配、多层缓存叠加或 Service Worker 错误接管上。
怎么看浏览器到底用了哪份 HTML？
别猜，直接看 Network 面板里 index.html 的响应状态和响应头：
- 如果是
200 (from memory cache)或200 (from disk cache)，说明浏览器根本没发请求，直接用了本地缓存 - 如果是
304 Not Modified，说明走的是协商缓存，但服务器返回了旧的 ETag 或 Last-Modified，没触发更新 - 如果是
200且响应头含Cache-Control: max-age=86400，那这个 HTML 就会被缓存一天，改了 JS/CSS 也白搭 - 重点盯
Cache-Control和ETag字段：如果它们存在且值没变，浏览器就认为内容没变
为什么强制刷新（Ctrl+F5）也不生效？
因为 Service Worker 拦截了请求，并从旧缓存里返回了 HTML —— 这时 Network 面板里甚至看不到 index.html 的请求记录。
- 打开
Application → Service Workers，勾选Update on reload，再刷新，看是否触发新 SW 安装 - 检查 SW 的
install事件里有没有调用caches.open('v2')，而不是复用'v1' - 检查
activate事件里有没有caches.delete('v1')，否则旧缓存一直挂着，fetch 时可能随机命中 - 确认
self.skipWaiting()和clients.claim()是否都执行了，否则新 SW 卡在 waiting 状态，老 HTML 继续服役
CDN 或反向代理把 index.html 缓存了怎么办？
哪怕你服务器返回了 Cache-Control: no-cache，CDN（比如 Cloudflare、阿里云 DCDN）或 Nginx 可能把它当静态资源缓存了 1 小时甚至 1 天。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I https://yoursite.com/查真实响应头，绕过浏览器直连服务端，确认Cache-Control是你设的值 - Nginx 配置中对
location = /index.html块必须显式加：add_header Cache-Control "no-cache, must-revalidate"; - Cloudflare 控制台里进「缓存规则」，单独为
/index.html新建一条规则，缓存级别设为「Bypass」 - 别信「页面规则」里“标准缓存”或“缓存一切”的默认选项——它们会把 HTML 当成普通静态文件塞进 CDN 节点
构建产物里 HTML 引用了新 JS，但页面还是旧逻辑？
这说明 HTML 文件本身被缓存了，而它引用的 JS 路径带哈希（如 app.a1b2c3.js）却加载失败——因为用户看到的 HTML 是旧版，里面写的还是 app.x9y8z7.js。
- 检查 HTML 是否进了 Service Worker 的
cache.addAll()列表，且路径是绝对路径（如"/index.html"），不是相对路径"index.html" - 确认构建后 HTML 中的 script src 是否真被替换成带哈希的新路径；Webpack 用户检查
html-webpack-plugin是否启用hash: true - 如果用了
document.write或内联脚本动态插入资源，那些路径不会被构建工具处理，必须手动加版本参数，比如src="utils.js?v=2.4.1" - 离线场景下更致命：HTML 没进缓存 = 白屏；进了缓存但没随版本更新 = 加载旧结构 + 执行新 JS →
Cannot find module './xxx'
最常被忽略的一点：HTML 缓存策略必须和它的动态性对齐。一个带登录态的仪表盘页面，设 Cache-Control: public, max-age=3600 就等于主动制造故障——它缓存的不是字节，是用户此刻不该看到的界面快照。
