html强缓存会导致dom结构“卡死”在旧版本，因浏览器直接从磁盘读取旧html，不校验字节；服务端必须返回cache-control: no-cache, must-revalidate或max-age=0，cdn需禁用html缓存，meta标签和js注入均无效。
HTML强缓存会导致DOM结构“卡死”在旧版本
服务端给 index.html 返回了 Cache-Control: public, max-age=31536000，浏览器就再也不会发请求——它直接从磁盘读取旧 HTML，连字节都不校验。你改了 DOM 结构、加了新 class、删了冗余 div，用户刷新后看到的仍是旧树，JS 找不到新元素、CSS 选不到新节点，报错或白屏是必然结果。
常见错误现象：document.querySelector('.new-header') 返回 null，但你在源码里明明写了；Network 面板中 index.html 显示 200 (from disk cache)，状态码旁边没请求时间戳；本地改完 HTML 热更新不生效，重启开发服务器才看到变化。
- 生产环境必须设为
Cache-Control: no-cache, must-revalidate或max-age=0，强制每次走协商缓存（ETag/Last-Modified） - Nginx 示例：
location = /index.html { add_header Cache-Control "no-cache, must-revalidate"; } - CDN 上必须关闭 HTML 缓存，Cloudflare 的 “Cache Everything” 规则会覆盖源站头，务必禁用
- Webpack/Vite 构建时，别把
index.html丢进cacheGroups—— 它不是静态资源，不该被打包缓存逻辑处理
Service Worker 缓存名不变 = DOM 更新永远不生效
你改了 HTML 内容、更新了构建哈希、甚至重写了整个 App Shell，但 Service Worker 还在用 caches.open('pages')，那所有新内容都进不了缓存桶。旧 HTML 永远被 fetch 拦截返回，用户离线或刷新，加载的还是上个版本的 DOM 树。
典型表现：SW 更新后首次访问正常，二次刷新又变回旧版；控制台报 TypeError: Failed to execute 'put' on 'Cache': Request failed；caches.keys() 列出一堆带时间戳的旧缓存名，但新 SW 脚本里没清理它们。
- 缓存名必须带版本标识，如
pages-v2.1.0或assets-${BUILD_HASH}，不能写死为固定字符串 - 构建时通过环境变量注入版本，例如 Vite 中用
import.meta.env.VITE_APP_VERSION，避免手写错误 -
install阶段必须显式调用cache.addAll(['/index.html', '/offline.html'])，否则 HTML 不进新缓存 -
activate阶段清理旧缓存前，先用clients.claim()确保新 SW 接管当前页面，再遍历caches.keys()删除非当前名的缓存
meta http-equiv="Cache-Control" 对 DOM 刷新完全无效
<meta http-equiv="Cache-Control" content="no-cache"> 在 Chrome/Firefox/Edge 中被彻底忽略。它既不会阻止 HTML 被强缓存，也不会触发 DOM 重建——DOM 解析器根本看不到这个标签，HTTP 头只在网络层起作用。
开发者常误以为“写了 meta 就生效”，结果上线后用户清缓存、硬刷、换设备，还是看到旧按钮、旧表单、旧路由配置。更危险的是，内联 JS 里写的 API 地址、data- 属性里的版本号，全都被一起缓存下来，变成硬编码的过期快照。
- 所有缓存控制必须由服务端响应头发出，前端无法用 JS 或 meta 注入改变
- 动态插入
<meta>标签（比如用document.head.appendChild()）同样无效，不会触发任何缓存策略变更 - SSR 渲染的 HTML 若含服务端注入变量（如
<meta name="build-time" content="2026-06-30">），离线时该值永远冻结，无法随部署更新
DOM 结构变更后，用户不刷新就看不到新内容
哪怕你把缓存策略全配对了，只要用户没手动刷新页面，浏览器就不会重新请求 index.html。旧 DOM 树继续运行，新结构只躺在服务器上。这不是 bug，是 HTTP 缓存机制的设计使然——它不主动推送变更，只被动响应请求。
最容易被忽略的点：SPA 路由跳转（如 history.pushState()）不会触发 HTML 重载，所以即使你改了 /dashboard 页面的 DOM，用户从首页点进去，加载的仍是缓存里的旧副本。
- 关键路径上必须加用户提示，比如检测到新版本时显示“请刷新以获取最新功能”
- 可用
fetch('/index.html?_t='+Date.now())做轻量比对，响应体 diff 后再引导刷新（注意不要暴露敏感信息） - 避免在 HTML 中用
document.write()或内联脚本生成核心 DOM，这些内容不会被 SW 或 HTTP 缓存捕获，离线时直接消失 - 真实线上环境里，约 37% 的用户一周内不刷新页面——DOM 更新的可见性，取决于你如何推动这次刷新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
