HTML缓存关键在于分层策略：静态资源用max-age=31536000+immutable+哈希文件名实现永久强缓存，HTML入口设no-cache或max-age=300确保及时更新，ETag须基于内容哈希生成以避免脏数据。
直接削减流量成本的关键，在于让浏览器少发请求、少传数据——HTML缓存机制不是“锦上添花”，而是对静态资源做强缓存 + 不可变标识，对动态内容做零缓存或协商验证。其他做法（比如只加 Cache-Control: public）基本无效，甚至引发 stale data 风险。
为什么max-age=31536000必须搭配immutable
只设 max-age=31536000（一年），浏览器在过期前仍可能发起条件请求（如带 If-None-Match 的 304 请求），这部分请求虽不传 body，但仍有 TCP/TLS 开销和 RTT 延迟，对弱网用户尤其明显。
-
immutable告诉浏览器：“这个资源这辈子都不会变”，彻底跳过验证流程，真正实现“一次下载，永久复用” - 必须配合版本化文件名使用，例如
app.8f3e2d.js，否则更新后用户永远拿不到新版本 - Nginx 示例：
add_header Cache-Control "public, immutable, max-age=31536000"; - Akamai/Cloudflare 等 CDN 默认不支持
immutable，需确认是否启用 HTTP/2+ 并开启该指令透传
index.html为什么不能缓存超过5分钟
index.html 是整个应用的入口，哪怕只改了一行 JS 路径，缓存旧 HTML 就会导致加载错误的 bundle，白屏或功能异常。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确做法：返回
Cache-Control: no-cache, must-revalidate或max-age=300（5 分钟） - 避免用
Expires：它依赖客户端时间，手机系统时间错位时会直接失效或误判 - 如果用了 Service Worker，
index.html可设为no-store，由 SW 全权接管更新逻辑 - 切勿在
index.html里写<meta http-equiv="Cache-Control" content="...">—— 这个标签在现代浏览器中已被忽略
CDN 缓存 HTML 片段时，ETag 和 Last-Modified 谁更可靠
两者都可用于协商缓存，但实际效果差异很大：
立即学习“前端免费学习笔记（深入）”；
-
Last-Modified精度是秒级，同一秒内多次部署可能被判定“未修改”，导致返回 304 和脏数据 -
ETag应基于内容哈希生成（如ETag: "xyz789"），只要 HTML 字节变了，ETag 就变，验证精准 - CDN 如 Cloudflare 默认关闭 ETag 透传，需手动开启 “Origin Cache Control” 并确保源站返回真实 ETag
- 若源站用 Nginx +
etag on;，注意它默认用 mtime + size 生成 ETag，仍不安全；应改用ngx_http_fancy_index_module或自定义 Lua 脚本生成内容哈希
最容易被忽略的一点：缓存收益不取决于“能缓多久”，而取决于“有多少请求真正命中了缓存”。如果 HTML 中混写了 script 标签注入用户态数据（比如 const user = {{.CurrentUser.ID}};），整个页面就无法缓存——哪怕只有一处动态插值，也要拆成独立 API 加协商缓存，而不是妥协地延长 HTML 缓存时间。
