HTML头部Meta标签与浏览器多级缓存策略的深度耦合方案-html教程-PHP中文网

现代浏览器完全忽略，缓存决策仅由服务器响应头决定；devtools中看到的cache-control值100%来自服务端，与meta无关。

html头部meta标签与浏览器多级缓存策略的深度耦合方案

meta 标签和浏览器多级缓存之间没有深度耦合——它根本不会参与真实缓存决策。

为什么 `meta http-equiv="Cache-Control"` 在现代浏览器里完全失效

这不是 bug，是规范明确弃用。Chrome、Firefox、Safari 自 2010 年代起就忽略所有 meta 中的缓存指令，只读取 HTTP 响应头。即使你在里写满 no-store, must-revalidate, max-age=0，只要服务器返回了 Cache-Control: public, max-age=3600，浏览器就照执行。

常见错误现象：

DevTools 的 Network 面板里看到 cache-control 字段高亮，误以为生效
本地双击打开 HTML 文件时“好像”生效了，但上线后立刻失效
CDN 或反向代理（如 Nginx）完全看不到 meta，自然也不转发、不响应

Nginx/Apache 等服务端必须配置的缓存头组合

HTML 文件必须走协商缓存，禁用强缓存；静态资源（JS/CSS/图片）才适合强缓存。否则更新 HTML 后，旧 JS 还在缓存里，直接引发白屏或功能错乱。

关键配置点：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

对 index.html 和其他 HTML 路径：设置 Cache-Control: no-cache, must-revalidate + ETag 或 Last-Modified
对 .js、.css、.png 等静态资源：用 Cache-Control: public, max-age=31536000, immutable（注意 immutable 只在 HTTPS 下有效）
避免同时设 Expires 和 Cache-Control，前者会被后者覆盖；但 Expires 对老旧代理仍有微弱兼容价值

示例（Nginx）：

location = /index.html {
  add_header Cache-Control "no-cache, must-revalidate";
  add_header ETag "";
}
location ~* \.(js|css|png|jpg|woff2)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}