HTML文件缓存必须由服务端通过HTTP响应头（如Cache-Control、ETag）控制，meta标签在现代浏览器中完全无效，因浏览器在解析HTML前已依据响应头决定缓存行为，且HTTP/1.1规范已废弃meta http-equiv缓存指令。
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 可能被破坏，导致协商失败
真正难的不是配对参数，而是确保构建、部署、CDN、服务端四层缓存策略不互相打架。一个环节掉链子，用户就卡在旧版本里。
