如何通过HTML缓存机制设置资源失效规则-html教程-PHP中文网

HTML文件缓存必须由服务端通过HTTP响应头（如Cache-Control、ETag）控制，meta标签在现代浏览器中完全无效，因浏览器在解析HTML前已依据响应头决定缓存行为，且HTTP/1.1规范已废弃meta http-equiv缓存指令。

如何通过html缓存机制设置资源失效规则

HTML 文件本身不能设置资源失效规则——所有缓存行为由服务端返回的 HTTP 响应头控制，meta 标签在现代浏览器中完全无效。

为什么 `Cache-Control` 必须由服务端发，不能靠 HTML 写

浏览器解析 HTML 前，已经根据响应头决定是否缓存该 HTML 文件。你在里写 <meta http-equiv="Cache-Control" content="no-cache">，Chrome、Firefox、Safari 都会忽略。这不是兼容性问题，而是规范明确废弃的行为（HTTP/1.1 RFC 7234 已不承认此类 meta 指令）。

验证方法：打开 DevTools → Network → 找到 index.html 请求 → 看 Response Headers 里有没有 Cache-Control，而不是看 HTML 源码
常见错误：本地调试时用 file:// 协议打开 HTML，此时无 HTTP 头，浏览器按默认策略缓存（通常极短或不缓），但这和线上行为无关
CDN 场景下更危险：Cloudflare、Akamai 等会覆盖源站头，必须用 curl -I https://yoursite.com/index.html 实际抓包确认最终生效的头

`Cache-Control` 的三个关键参数怎么配才真正生效

单写 max-age=3600 是最常见也最危险的配置错误。它让浏览器在 1 小时内彻底跳过请求，哪怕你刚上线了紧急 hotfix，用户也看不到。

no-cache：不是“不缓存”，而是“每次都要协商”。浏览器仍可复用本地副本，但必须带 If-None-Match（对应 ETag）或 If-Modified-Since 发请求，服务端返回 304 Not Modified 才复用 —— 这才是 HTML 应该的模式
must-revalidate：强制校验，即使浏览器离线也要尝试发请求（对 PWA 场景重要）
no-store：真·禁用缓存，所有内容不落盘、不进内存，适合含敏感信息的页面（如银行交易页），但会显著增加带宽和延迟

推荐 HTML 的最小安全配置：Cache-Control: no-cache, must-revalidate。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

静态资源（JS/CSS/图片）如何让缓存“自动失效”

所谓“自动失效”，本质是让旧 URL 不再被复用。浏览器只认 URL，不认文件内容。所以核心不是改头，而是改名。

构建时必须启用 content hash：Webpack 用 [contenthash]，Vite 默认开 [hash]，生成类似 main.a1b2c3.js 的文件名
服务端配 Cache-Control: public, immutable, max-age=31536000 —— immutable 是关键，它告诉浏览器：“这个 URL 对应的内容永远不会变”，后续访问直接跳过协商请求
漏掉任意一环都会失效：没哈希 → URL 不变 → 即使加了 immutable，用户也永远拿不到新 JS；有哈希但没配 immutable → 每次都发 If-None-Match，浪费一次 RTT
CSS 中引用的图片（url(logo.png)）也必须走哈希处理，否则 CSS 文件变了，但图片 URL 没变，旧图片仍被复用

如何验证缓存是否按预期工作

别信地址栏回车或 F5 刷新。它们可能走内存缓存（from memory cache），不触发真实协商逻辑。

正确验证步骤：关闭所有标签页 → 新开隐身窗口 → 访问页面 → DevTools Network → 找 index.html → 看状态码和 Size 列
期望看到：200（首次加载）、304（第二次且服务端确认未变）、200（内容真变了）
如果始终是 200 且 Size 显示字节数（非 from disk cache），说明服务端没返回 ETag 或 Last-Modified，协商缓存根本没启用
Nginx 默认开 ETag，但如果你用了 gzip_static on 且没配 gzip_vary on，ETag 可能被破坏，导致协商失败