HTML缓存有效期不由meta标签控制，必须由服务端通过Cache-Control或Expires响应头设定；现代浏览器完全忽略<meta http-equiv="Cache-Control">，仅支持HTTP响应头配置。
HTML 文件本身不决定缓存有效期，必须由服务器返回的 Cache-Control 或 Expires 响应头控制；写在 <meta> 标签里的声明基本无效。
为什么不能用 <meta http-equiv="Cache-Control">
现代浏览器（Chrome、Firefox、Safari）完全忽略 <meta http-equiv="Cache-Control" content="max-age=3600"> 这类写法。它既不参与 HTTP 请求流程，也不触发 ETag/Last-Modified 验证。只在极老 IE 中有碎片化支持，且行为不可靠。误信它生效，反而会掩盖真实服务端配置缺失的问题。
设置 HTML 缓存有效期的正确方式
核心是让服务器对 index.html（或任何 HTML 响应）返回明确的 Cache-Control 值。不同环境配置如下：
- Nginx：在匹配 HTML 的
location块中加add_header Cache-Control "public, max-age=3600";（适合内容极少变动的页面） - Apache：
Header set Cache-Control "public, max-age=86400"放在.htaccess或虚拟主机配置里 - Express（Node.js）：
res.set('Cache-Control', 'public, max-age=1800')在对应路由中调用 - Vercel/Netlify：用
_headers文件或netlify.toml规则，例如/*.html匹配后设cache-control: public, max-age=0, must-revalidate
HTML 缓存有效期该设多长？
绝大多数 HTML 不该设长缓存——它常是 SPA 入口或内容易变的页面，强缓存过久会导致 JS/CSS 版本错配、用户看到旧结构。推荐策略：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 动态页（如用户中心、新闻列表）：
Cache-Control: no-cache, must-revalidate或max-age=0，强制每次校验 - 静态页（如公司介绍、帮助文档）：
max-age=3600（1 小时）到max-age=86400（24 小时）较稳妥 - 绝对不要给 HTML 设
immutable或max-age=31536000——那是给指纹化命名的 JS/CSS 用的 - 避免同时设置
Cache-Control和Expires，现代浏览器以Cache-Control为准，但旧版 IE 可能行为不一致
如何验证有效期是否生效
别依赖普通刷新（F5）或地址栏回车，它们可能走内存缓存或强制协商。正确验证步骤：
- 打开 Chrome DevTools → Network 面板 → 刷新页面
- 找到
index.html请求 → 点开 → 查看 Response Headers 是否含Cache-Control字段及值 - 看 Status 列：
200 from disk cache表示强缓存命中（对 HTML 来说通常是错的）；304 Not Modified表示协商缓存生效；200 OK（带字节数）表示重新下载 - 注意：Ctrl+Shift+R 强制刷新会跳过所有缓存，无法用于验证
真正难的是平衡——设太短，每次都要发请求校验，拖慢首屏；设太长，用户卡在旧 HTML 里，JS/CSS 已更新却加载失败。关键不是“设多久”，而是“谁来决定何时失效”：HTML 应依赖服务端主动下发新响应头，而不是靠前端 hack 或用户手动清缓存。
