HTML缓存由服务器HTTP响应头（如Cache-Control、ETag）控制，meta http-equiv="Cache-Control"在现代浏览器中完全无效；index.html须短缓存以防JS/CSS版本错配。
HTML缓存不由HTML本身控制
浏览器是否缓存 index.html，和你写的任何 <meta http-equiv="Cache-Control"> 都没关系。现代浏览器（Chrome、Firefox、Safari、Edge）完全忽略这类标签——它只在极个别老旧 WebView 或 IE 里起过作用，现在连兼容性测试都不值得覆盖。
真正起效的，只有服务器返回的 HTTP 响应头：Cache-Control、ETag、Last-Modified、Expires。这些头由后端逻辑或反向代理（如 Nginx/Apache）注入，HTML 文件自身没有“发言权”。
为什么 index.html 必须短缓存或走协商缓存
index.html 是 SPA 的入口，它里面写的 <script src="main.a1b2c3.js"></script> 这类引用，决定了后续加载哪些资源。一旦 HTML 缓存太久，而 JS/CSS 已发新版，就会出现“旧 HTML + 新 JS 路径”或“旧 HTML + 已删除旧 JS”的错配，典型报错是 Uncaught SyntaxError: Unexpected token '（浏览器把 404 HTML 当 JS 解析了）。
- 推荐配置：
Cache-Control: no-cache（强制每次验证）或max-age=0, must-revalidate - 避免用
public, max-age=3600，除非页面内容真的一天都不变（比如静态官网首页） - 绝对不要加
immutable—— 它等于告诉浏览器“这 HTML 永远不会变”，和现实开发节奏相悖
如何验证 HTML 是否按预期缓存
打开 DevTools → Network → 刷新页面（别用 Ctrl+Shift+R 强刷），找到 index.html 请求行：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 看到
200 (from memory cache)或200 (from disk cache)：说明命中强缓存，响应头可能误配了max-age - 看到
304 Not Modified：说明走了协商缓存，ETag或Last-Modified生效，这是理想状态 - 看到
200且 Size 显示具体字节数（如 2.4 KB）：说明缓存失效，服务端返回了新内容
注意：Nginx/Apache/Express 中配置的响应头，必须作用于 index.html 对应的 location 或路由路径，否则压根不生效。漏掉 location = /index.html 这种精确匹配，就容易被泛匹配规则覆盖。
静态资源缓存与 HTML 缓存必须解耦
JS/CSS/图片等静态资源可以也应当长期缓存，但前提是它们的文件名带内容哈希（如 main.ea7f2d.js）。这样即使 HTML 缓存失效重载，新 HTML 会拉新文件名，自然绕过旧缓存。
- 构建工具（Vite/Webpack）需启用
contenthash或fullhash - 服务端对
.js、.css、.png等后缀统一配Cache-Control: public, max-age=31536000, immutable - 千万别让所有资源共用一个缓存策略：HTML 和 JS 同设
max-age=3600，更新时必然错乱
最常被忽略的一点：CDN 或中间代理可能覆盖你服务器的响应头。上线前务必在真实网络环境下抓包确认最终到达浏览器的 Cache-Control 值，而不是只信本地 Nginx 配置。
