HTML缓存由服务端响应头控制，meta标签完全无效；Chrome、Firefox、Edge及现代Safari均忽略<meta http-equiv="Cache-Control">，因缓存决策在HTML解析前已完成。
HTML 代码本身无法触发缓存机制——缓存由服务端响应头控制，meta 标签完全无效。 你在 <head> 里写 <meta http-equiv="Cache-Control" content="no-cache">，Chrome、Firefox、Edge、现代 Safari 全部忽略。这不是兼容性问题，是协议层面不支持。
为什么 <meta http-equiv> 对缓存没用
HTTP 缓存策略必须通过真实 HTTP 响应头（如 Cache-Control、Expires）传递。浏览器在解析 HTML 前就已根据响应头决定是否复用缓存；<meta> 是 HTML 解析阶段才读取的内容，此时缓存决策早已完成。
- 实测：用 curl 或 Network 面板看
index.html的响应头，meta写得再全，Response Headers里也找不到对应字段 - 唯一例外：极老版 Safari（≤ iOS 9）可能降级识别，但不可依赖，也不解决任何线上问题
- 写了反而误导团队——以为“加了 meta 就算做了缓存控制”
真正起效的缓存控制点在服务端
你必须让服务器对 index.html 返回正确的 Cache-Control 响应头。策略取决于页面类型：
- 静态文档页（如博客、帮助中心）：
Cache-Control: public, max-age=3600—— 但前提是所有 JS/CSS 路径含 content hash（如main.7a2b1c.js），否则会白屏 - 带登录态或实时数据的页面（如仪表盘、订单列表）：
Cache-Control: private, max-age=0, must-revalidate—— 允许浏览器暂存，但每次访问都向服务器验证是否更新 - 敏感页（支付确认、密码重置）：
Cache-Control: no-store—— 禁止任何缓存，连内存都不留副本
Nginx 示例（仅作用于 /index.html）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
location = /index.html {
add_header Cache-Control "private, max-age=0, must-revalidate";
}
CDN 和代理层必须同步配置
CDN 不是缓存开关，而是缓存放大器。如果源站返回 no-cache，但 CDN 后台单独给 /index.html 配了 10 分钟缓存，用户看到的就是 CDN 缓存的旧 HTML。
- Cloudflare：在 Page Rules 里设
/*index.html→ “Cache Level: Bypass” 或 TTL = 60s - 阿里云 CDN：路径配置中将
/index.html设为“不缓存”或“缓存过期时间 = 60 秒” - 调试时重点看两个字段：
Cache-Control（确认源站策略） +x-cache或x-cdn-cache（确认 CDN 是否命中及是否覆盖）
最容易被忽略的点：HTML 缓存策略和它引用的 JS/CSS 必须协同生效。光把 index.html 设成 no-cache 没用——如果 main.js 没启用 content hash，浏览器仍可能加载到旧版本，导致功能错乱。缓存不是单点配置，而是一整套构建 + 服务端 + CDN 的配合链条。
