HTML模板更新后页面仍显示旧内容，根本原因是多层缓存未彻底清理：Service Worker、Cache Storage、CDN及HTTP强缓存均可能拦截请求；仅Ctrl+F5无效，须按浏览器级→站点级→服务端级顺序清除，并配合URL版本化或构建哈希确保资源更新。
HTML模板更新后页面仍显示旧内容，基本就是缓存没清干净——不是浏览器没刷新，而是缓存层级太多，只做一步根本清不彻底。
Ctrl+F5 强制刷新为什么有时无效
它只跳过内存缓存和部分磁盘缓存，但对 Service Worker 缓存、Cache Storage、HTTP Cache-Control 响应头控制的强缓存完全没用。尤其当模板被预缓存进 workbox 或通过 navigator.serviceWorker.register() 注册过，Ctrl+F5 就只是“假装刷新”。
- 强制刷新不清理
Cache Storage，Service Worker 可能仍从其中返回旧 HTML - 若服务器返回
Cache-Control: public, max-age=3600，浏览器会直接读磁盘缓存，连请求都不发 - 某些前端框架（如 Vue CLI、Create React App）开发服务器默认启用内存缓存，本地
index.html修改后需重启服务才生效
开发者工具里 Disable cache 不等于清缓存
Disable cache 是运行时开关，只影响当前 DevTools 打开期间的请求，关掉就恢复；它不删除任何已存文件，也不影响其他标签页或无痕窗口。
- 勾选后刷新，Network 面板里所有资源状态码是
200（来自服务器），但关闭 DevTools 后再打开同页面，立刻变回200 (from disk cache) - 它对
localStorage、sessionStorage、IndexedDB里的模板字符串或预编译结果毫无影响 - 如果模板逻辑依赖服务端渲染（SSR）且 CDN 缓存了 HTML，禁用浏览器缓存也看不到新内容
真正要删的是这三类缓存位置
必须按顺序清理，漏掉任意一层都可能让旧模板“复活”：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 先清浏览器级：
chrome://settings/clearBrowserData→ 时间范围选“所有时间”，勾选“缓存的图片和文件”+“Cookie及其他站点数据”+“缓存存储区（Cache Storage）” - 再清站点级：
chrome://settings/siteData→ 搜索域名 → 点击右侧三个点 → “移除” → 确保Cache Storage、Service Workers、Local Storage全部消失 - 最后清服务端/CDN 层：如果是自己部署，检查 Nginx 的
proxy_cache或 Cloudflare 的 Page Rule 是否对*.html设置了缓存；临时可加响应头Cache-Control: no-store验证
模板更新后必须改 URL 参数或文件名
靠清理用户端缓存不可靠，尤其面向生产环境。最稳的方式是让浏览器“不得不”重新请求：
- 静态模板文件（如
template.html）改名成template_v2.html，并同步更新所有引用处 - 若无法改名，强制加版本参数：
template.html?v=20260502，日期戳比数字更防误判 - Webpack/Vite 构建产物自动哈希（如
index.[hash].html）是标准解法，但需确保 HTML 中引用的 JS/CSS 也带对应哈希，否则 HTML 新、JS 旧，照样出问题
真正麻烦的从来不是“怎么清”，而是你不知道缓存藏在哪一层——Service Worker 没注销、CDN 没刷新、构建产物没哈希、甚至本地开发服务器开着 watch 但没监听 HTML 变更，这些都会让模板更新失效。动手前先用 Network 面板看一眼 index.html 的 Status 是 200 还是 304，再决定从哪一层开始动刀。
