HTML缓存失效主因是响应头配置错误、CDN未缓存、内联资源耦合及SSR无兜底；应按内容时效性分级设置Cache-Control，分离静态资源，清理敏感Header，并在网关层为SSR加多级缓存。
浏览器缓存头没配对，再多的CDN也扛不住请求
HTML本身不“处理”并发，它只是被缓存和分发的静态资源。真正起作用的是HTTP响应头里的缓存控制策略。如果Cache-Control设成no-cache或max-age=0，哪怕你有10台CDN节点，每个用户每次刷新都会回源——等于把并发压力原封不动甩给后端。
常见错误现象：
- 页面访问量涨10倍，CDN命中率却跌到20%以下
- 运维监控看到大量
200 OK（非304 Not Modified）响应，说明根本没走协商缓存
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 对不变的HTML（如活动落地页、公告页），直接用
Cache-Control: public, max-age=31536000（1年），配合文件内容哈希命名（如index.a1b2c3.html） - 对需定期更新但非实时的HTML（如首页导航、频道页），用
Cache-Control: public, max-age=3600+ETag或Last-Modified，让浏览器在过期后发起条件请求 - 避免滥用
must-revalidate——它强制每次校验，会显著增加回源请求数
CDN节点缓存未开启或配置冲突，HTML请求直奔源站
很多团队以为上了CDN就万事大吉，结果突发流量一来，源站CPU飙到95%，查日志发现大量请求Header里带着Cache-Control: private或Set-Cookie，导致CDN默认不缓存。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 活动页HTML由后端模板引擎动态生成（如Thymeleaf、Jinja2），但未显式清除敏感Header
- 反向代理（如Nginx）在转发时自动添加了
Vary: Cookie，而实际页面并不依赖Cookie
实操建议：
- 检查CDN控制台的缓存规则，确认
.html后缀是否被纳入缓存白名单；部分CDN（如Cloudflare）默认只缓存GET且无Cookie的请求 - 在Web服务器层清理无关Header：
proxy_hide_header Set-Cookie;、proxy_hide_header Vary;（Nginx） - 若必须保留
Vary，只按确定影响渲染的字段设置，例如Vary: Accept-Encoding, User-Agent，而非笼统写Vary: *
HTML内联资源未分离，缓存粒度被拉垮
一个index.html里塞了20KB的<script>、15KB的<style>、甚至base64图片，会导致整个HTML文件只要改一行JS就必须全量失效——缓存复用率归零，突发流量下所有用户都在重复下载同一份大HTML。
性能影响：
- HTML体积每增大100KB，首屏时间平均增加300ms（实测于3G网络）
- CDN边缘节点缓存空间有限，大HTML容易挤掉其他高频资源
实操建议：
- 把JS/CSS抽成独立
<script src="xxx.js">和<link href="xxx.css">，并为它们单独配置长缓存（max-age=31536000）+ 文件哈希 - 避免
<script>alert('hello')</script>这类内联脚本；如需初始化数据，用<script type="application/json">{...}</script>方式注入，体积小、易缓存 - 图片一律外链，禁用base64（除非小于2KB且确定永不变更）
服务端渲染（SSR）HTML没做缓存兜底，每次都是真跑一遍
用Next.js、Nuxt或自研SSR服务时，如果没在网关或应用层加缓存，每个HTML请求都会触发一次完整的渲染流程：数据库查询 → 模板编译 → 字符串拼接 → HTTP响应。高并发下，这比静态HTML慢1~2个数量级。
容易踩的坑：
- 误以为“SSR = 更快”，其实没缓存的SSR是并发黑洞
- 缓存Key设计不合理，比如用完整URL做Key，但忽略了UTM参数、A/B测试ID等噪声字段，导致缓存碎片化
实操建议：
- 在API网关（如Kong、APISIX）或反向代理层加一层
proxy_cache，缓存SSR返回的HTML，Key建议用host + path + accept-encoding三元组 - 对SSR接口加
Cache-Control: public, s-maxage=60（60秒），让CDN可缓存，同时允许客户端再缓存更短时间（如max-age=10） - 敏感页面（如登录态首页）用
private缓存，但至少在CDN层做stale-while-revalidate，避免雪崩式回源
HTML缓存不是“开了就行”，关键在缓存层级是否对齐业务变化节奏——静态内容要敢设1年，动态内容要敢设1秒，中间那段“半静态”区域最容易被忽略，也是高并发时最先崩的点。
