HTML缓存由HTTP响应头控制，需按页面动态性分层配置：静态页用public,max-age=3600；带用户态页面用no-cache或max-age=0,must-revalidate；敏感页用no-store；Nginx须分离HTML与静态资源缓存策略。
HTML 缓存不是靠写个 <meta> 标签就能生效的——它完全由服务器返回的 HTTP 响应头控制，错配会导致用户卡在旧版页面、JS/CSS 错配、白屏等线上问题。配置对了，首屏快；配错了，连刷新都救不回来。
Cache-Control 必须按页面动态性分层设
给所有 HTML 统一加 public, max-age=3600 是最常见失误。关键看页面是否带用户态或实时数据：
- 静态页（文档、博客）：可设
public, max-age=3600，但前提是引用的 JS/CSS 文件名含内容哈希（如main.a1b2c3.js） - 带登录态/订单/仪表盘的页面：必须用
no-cache或max-age=0, must-revalidate——允许缓存，但每次都要校验 - 支付页、隐私页等敏感页：用
no-store，彻底禁用任何缓存（包括内存和磁盘）
别用 private：CDN 节点会忽略它，导致边缘缓存失效，首屏反而变慢。
Nginx 配置要区分 HTML 和静态资源
HTML 和 JS/CSS 的缓存策略必须分开，不能共用一个 location 块：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 对
/index.html单独配：location = /index.html {<br> add_header Cache-Control "no-cache";<br> expires -1;<br>} - 对静态资源（CSS/JS/图片）用指纹化路径 + 长期缓存：
location ~* \.(css|js|png|jpg|woff2)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>} - 确保
immutable只用于带哈希的文件——否则改了内容但 URL 不变，缓存就永远不更新
验证缓存是否真生效，别信 F5 刷新
普通刷新（F5 或地址栏回车）可能走内存缓存，掩盖真实行为。正确验证方式：
- 打开 DevTools → Network → 刷新页面 → 找到
index.html请求 - 看 Size 列：显示
from memory cache或from disk cache表示强缓存命中（HTML 不该这样） - 看 Status 列：出现
304 Not Modified才是协商缓存正常；200 OK且无from cache说明没缓存或已过期 - 强制刷新（Ctrl+Shift+R）会跳过所有缓存，仅用于排除干扰，不能用来判断日常行为
Service Worker 离线缓存里 HTML 必须显式包含
只缓存 app.js 和 style.css，漏掉 index.html，离线时就是白屏——浏览器连主文档都拿不出来：
- 在 SW 的
install事件中，用cache.addAll()显式加入绝对路径：['/', '/index.html', '/offline.html'] - 每次部署必须变更 CacheStorage 名称（如从
v1→v2），并在activate事件中调用caches.delete('v1') -
fetch事件中，对request.destination === 'document'的请求，必须兜底返回/offline.html，否则网络中断时直接报错
最容易被忽略的是：HTML 缓存时间越长，对 JS/CSS 路径一致性要求越高；一旦缓存策略和构建产物哈希没对齐，用户看到的就是“新 HTML + 旧 JS”或“旧 HTML + 新 CSS”，功能断裂几乎必然发生。
