HTML缓存本质是服务端通过Cache-Control等响应头控制index.html的HTTP缓存，而非模板缓存；配错策略（如public, max-age=3600）易致HTML与JS/CSS版本不一致，引发白屏或404；静态页可设该策略但需资源带内容哈希，动态页应设private, max-age=0, must-revalidate，敏感页用no-store；meta标签无效，必须由服务端配置。
HTML 文件本身不能被“模板缓存”加速——真正起作用的是 HTTP 层面对 index.html 的缓存控制。混淆模板渲染缓存和浏览器 HTTP 缓存，是线上页面长期卡在旧版本的最常见原因。
为什么给 index.html 配 public, max-age=3600 很危险
这个配置会让浏览器在 1 小时内直接复用本地 index.html，完全不发请求。但现代前端应用的 HTML 只是壳，真实逻辑和内容全靠 JS 加载；一旦你上线了新 main.a1b2c3.js，而用户还在用旧 index.html（里面仍引用 main.x9y8z7.js），就会白屏或功能错乱。
- 静态站点（如文档页、博客）可设
public, max-age=3600，但必须确保所有 JS/CSS 路径带内容哈希（如app.f3d2e1.css） - 带登录态或用户数据的页面（仪表盘、订单页），应设
private, max-age=0, must-revalidate：允许缓存，但每次都要向服务器验证是否过期 -
no-cache不等于“不缓存”，而是强制走协商缓存（ETag / Last-Modified）；no-store才是彻底禁用，适用于支付确认页等敏感场景
meta http-equiv="Cache-Control" 基本没用
Chrome、Firefox、Edge 完全忽略 <meta http-equiv="Cache-Control" content="...">。它只在极老版 Safari（≤ iOS 9）中可能降级生效，2026 年已无实际价值。所有缓存策略必须通过 HTTP 响应头设置。
- Apache：在
.htaccess或虚拟主机配置中用Header set Cache-Control - Nginx：在
location = /index.html块里写add_header Cache-Control "private, max-age=0, must-revalidate"; - Node.js（如 Express）：
res.set("Cache-Control", "private, max-age=0, must-revalidate")
静态资源（JS/CSS/图片）必须启用内容哈希 + immutable
JS 和 CSS 文件一旦带哈希（如 runtime.7f2a1d.js），就代表内容不可变。此时配合 immutable 指令，能让浏览器跳过协商缓存阶段，直接复用本地副本，显著减少请求往返。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
Cache-Control: public, max-age=31536000—— 没immutable，浏览器仍可能发If-None-Match请求验证 - 正确做法：
Cache-Control: public, max-age=31536000, immutable—— 浏览器认定该资源永不过期，除非 URL 改变 - 构建工具（Vite/Webpack）默认支持哈希输出；若手动管理，请确保文件名变更与内容变更严格绑定
最关键的细节在于：HTML 的缓存策略永远要服从于它所加载的资源。哪怕你把 index.html 缓存成 5 分钟，只要其中引用的 vendor.js 没哈希也没 immutable，用户就可能拿到不匹配的组合。这不是配置遗漏，而是架构层面的耦合关系。
