HTML不应设max-age，因其含动态内容易致功能异常；应设no-cache确保每次验证，CSS/JS等静态资源则需哈希命名+public,immutable实现强缓存。
不能靠缓存 HTML 本身来避免重复下载资源——HTML 是入口，不是资源主体；真正该缓存的是它引用的 CSS、JS、img 等静态文件。
为什么给 index.html 设 max-age 没用还危险
HTML 文件通常含动态内容：用户昵称、未读数、CSRF token、时间戳。哪怕只改一个字，旧缓存就会导致功能异常或数据错乱。常见现象包括：
- 登录后仍显示“请登录”按钮
- 商品价格没变，但下单时发现已涨价
- 表单提交失败，因为隐藏字段里的
csrf_token已失效
根本原因是 max-age 触发强缓存，跳过服务器验证；而 HTML 很少配 ETag 或 Last-Modified 做协商兜底，浏览器就真的一小时都不问服务器了。
静态资源必须用内容哈希 + immutable
提速的关键不在 HTML，而在它引用的那些体积大、变动少的文件。要让浏览器“一次下载，长期复用”，得满足两个硬条件：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 文件内容一变，URL 必须变——用构建工具生成带哈希的文件名，例如
main.a1b2c3.js、style.f4e5d6.css - 服务端响应头必须加
Cache-Control: public, immutable，告诉浏览器“这个 URL 永远不会变内容”，后续可跳过If-None-Match验证请求 - 不加哈希却设
immutable是自欺欺人：改了文件内容但 URL 不变，用户永远拿不到新版本
Nginx 示例配置：
location ~* \.(css|js|woff2|png|jpg|gif)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
HTML 本身该用 no-cache，不是 no-store
no-cache 不是“不缓存”，而是每次访问都必须向服务器发验证请求（带 If-None-Match 或 If-Modified-Since），服务器返回 304 Not Modified 才复用本地副本——这既保证更新及时，又省下完整响应体传输。
- 别用
meta http-equiv="Cache-Control"：现代 Chrome/Firefox/Edge 完全忽略它，只在某些老旧 WebView 中降级生效 - CDN 后台常默认开启 HTML 缓存，哪怕你 Nginx 写了
no-cache，CDN 也可能覆盖掉——务必在 CDN 控制台显式配置/index.html缓存时间为 60 秒或关闭 HTML 缓存 - 如果 HTML 含敏感信息（如后台仪表盘），才用
no-store；普通页面用no-cache就够了
CDN 和浏览器缓存不一致时最易翻车
这是最容易被忽略的协同断点：你 Nginx 设了 no-cache，CDN 却按路径规则缓存了 /index.html 10 分钟，结果用户刷新看到的还是旧页；或者 CDN 缓存了新 HTML，但浏览器还在用旧 main.js，导致 JS 报错。
- 调试方法：看 DevTools Network 面板里
index.html的响应头是否真有你设的Cache-Control，再看x-cache（Cloudflare）或x-cdn-cache（阿里云）确认是否命中 CDN - 关键原则：HTML 走短缓存或协商缓存，静态资源走长缓存 + 文件名哈希，CDN 层只做加速，不替代服务端缓存决策
- 绝对不要依赖客户端 JS 或 meta 标签去“清除”已缓存的 HTML——前端无法主动干预浏览器缓存策略，只能靠服务端响应头和构建时 URL 变更来驱动更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
