<meta>标签对HTTP缓存机制完全无效，现代浏览器均忽略其cache-control或expires声明；真正生效的是服务器返回的Cache-Control、Expires等HTTP响应头。
meta标签根本不能控制浏览器缓存过期时间
直接说结论：<meta> 标签对 HTTP 缓存机制完全无效。无论你写 <meta http-equiv="Cache-Control" content="max-age=3600"> 还是 <meta http-equiv="Expires" content="...">，现代浏览器（Chrome、Firefox、Edge、Safari）都会忽略它们。这是规范明确规定的——http-equiv 仅模拟 HTTP 响应头，但缓存行为由真实 HTTP 响应头决定，且主流浏览器已废弃对这类 meta 的支持。
真正生效的是服务器返回的HTTP响应头
浏览器只认服务器在 HTTP 响应中实际发送的 Cache-Control、Expires、ETag 等头部。前端静态资源（HTML/JS/CSS）的缓存策略必须由后端或托管服务配置：
- Nginx：在
location块中加add_header Cache-Control "public, max-age=3600"; - Apache：用
Header set Cache-Control "public, max-age=86400"（需启用mod_headers） - Vercel/Netlify：通过
_headers文件或vercel.json配置 - Node.js（Express）：用
res.set("Cache-Control", "no-cache")或中间件
注意：Cache-Control 优先级高于 Expires；设为 no-cache 不代表“不缓存”，而是强制每次验证（如带 ETag）；no-store 才真正禁止存储。
为什么有人误以为meta有效？
这种误解常来自三类情况：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 旧版 IE（≤9）曾部分支持
http-equiv="Pragma"，但早已淘汰 - 本地双击打开 HTML 文件（
file://协议），此时无 HTTP 头，浏览器可能退而求其次读取meta—— 但这不是标准行为，且无法复现线上环境 - 开发者工具 Network 面板里看到 HTML 响应头没生效，误以为是 meta 没写对，其实是服务器根本没发缓存头
验证是否生效，永远看 DevTools 的 Network → Response Headers，而不是页面源码里的 <meta>。
HTML中唯一相关的meta用途：防止页面被缓存后显示过期内容
虽然 meta 控制不了 HTTP 缓存，但它能影响页面加载后的 DOM 行为：
-
<meta http-equiv="refresh" content="0;url=...">可强制重定向，但和缓存无关 - 更实用的是配合 JavaScript 检测：用
performance.navigation.type === 1或document.visibilityState判断是否从缓存恢复，再触发重新拉取数据 - 某些 PWA 场景下，
<meta name="viewport">虽不涉缓存，但错误设置会导致移动端渲染异常，间接影响资源加载顺序
真正的缓存调试，得盯着服务器响应头、CDN 配置、以及是否启用了 service worker —— 这些地方出问题，<meta> 写得再漂亮也没用。
