怎么排查HTML缓存机制失效问题-html教程-PHP中文网

直接看network面板中index.html的响应状态和响应头：200(from memory/disk cache)说明未发请求，304说明协商缓存未更新，200含max-age则html被强缓存；若service worker接管，需检查application面板中sw更新、缓存名变更及清理逻辑；cdn或nginx可能覆盖响应头，须curl直查真实header；html未进sw缓存或路径非绝对将导致离线白屏或模块加载失败。

怎么排查html缓存机制失效问题

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 的请求记录。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

打开 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 天。

用 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'