Cache-Control 响应头必须由服务端设置，meta 标签在现代浏览器中基本无效；正确配置需结合指令语义（如 max-age=0, must-revalidate）、ETag 协商及 HTML 解析优化。
Cache-Control 响应头必须由服务器输出，meta 标签基本无效——这是绝大多数人卡住的第一步。
为什么在 index.html 里写 <meta http-equiv="Cache-Control"> 没用
Chrome、Firefox、Edge 现代版本完全忽略它；只有极个别旧版 Safari 或 WebView 可能降级识别。你改了 meta，DevTools Network 里却看不到生效，不是浏览器没刷新，而是它压根不读。
真正起效的只有一条路径：服务端响应头。验证方法很简单：打开 DevTools → Network → 找到 HTML 请求 → 查看 Response Headers 是否有 Cache-Control 字段。
- 用 Nginx：在
location = /index.html块里加add_header Cache-Control "no-cache";（注意：不能写在server全局块里被覆盖） - 用 Express：在路由 handler 中调用
res.set('Cache-Control', 'no-cache');，且必须在res.send()之前 - 用 Vercel 静态部署：必须在
vercel.json中显式配置headers，否则默认是no-cache
index.html 该设 no-cache 还是 max-age=0, must-revalidate
二者效果接近，但行为更可控的是后者：max-age=0, must-revalidate 明确要求浏览器每次发起条件请求（带 If-None-Match 或 If-Modified-Since），服务端可返回 304 Not Modified 复用本地副本。
而纯 no-cache 在某些 CDN 或代理环境下可能被弱化处理；private 则会让 CDN 节点直接跳过缓存，失去边缘加速能力。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 静态站点（如文档页）：可用
public, max-age=300（5 分钟），但前提是所有 JS/CSS 路径含内容哈希，否则缓存 HTML 却加载旧脚本，功能直接错乱 - SSR 或模板渲染页（含用户昵称、未读数）：必须禁用强缓存，
no-cache或max-age=0, must-revalidate是底线 - 登录页、支付页：用
no-store，彻底禁用缓存，避免敏感信息残留
ETag 不配好，no-cache 就等于白设
no-cache 后浏览器会发条件请求，但如果服务端没返回有效 ETag（或返回了但值恒定不变），就只能重下整个 HTML——比没缓存还糟，因为多了一次空转 HTTP 往返。
Nginx 默认开启 etag on;，但需确认未被 etag off; 覆盖；对动态 HTML（如 PHP/Node 渲染），别用时间戳生成 ETag，内容没变但时间戳变，照样触发重载。
- 推荐做法：用文件内容哈希生成
ETag（如"abc123"），构建时确定，服务端可复用 - 如果后端无法稳定提供
ETag，宁可只返回Cache-Control: no-cache，也不硬塞一个总在变的Last-Modified - 检查方式：看条件请求是否返回
304；若始终是200+ 完整 HTML，说明协商缓存失效
HTML 缓存再快，也救不了被阻塞的解析
缓存只是让 HTML 文件下载更快，但浏览器拿到后要逐行解析、构建 DOM、执行内联脚本——这个过程仍可能卡住首屏。
- 绝对不要把业务 JS 放在
里且不加defer或async：它会暂停 HTML 解析，白屏时间直线上升 - 初始化逻辑（如 Vue.mount、React.render）优先用
defer：下载不阻塞，执行时机可控 - 埋点类脚本（Sentry、GA）用
async：执行时机不可控，但不影响主流程 - 内联 JS 控制在 1KB 内；超量必须外链，否则 parser blocking 在低端设备上非常明显
Cache-Control 指令是否匹配页面动态性、ETag 是否真实反映内容变更、以及 HTML 结构是否让浏览器能快速构建出可交互的页面。三者缺一，缓存收益就断在中间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
