导读：网站访问慢、服务器压力大，很多时候不是代码问题，而是缓存没设计好。一个完整的缓存体系分为浏览器缓存、CDN 缓存与服务端缓存三层。本文从实战角度拆解每层缓存的工作机制、配置方法与失效策略，帮助你把网站的加载速度与抗压能力同时提上去。
一、为什么需要分层缓存
用户请求一个页面资源，会依次经过浏览器、CDN 节点、源站三层。缓存的本质是"让请求在离用户最近的一层被满足"：
浏览器缓存：重复访问不再发请求，速度最快；
CDN 缓存：静态资源在边缘节点命中，不回源；
服务端缓存：动态数据减少数据库查询。
三层各司其职，缺任何一层都会让下一层承压。
二、浏览器缓存：强缓存与协商缓存
浏览器缓存由响应头控制，分两类：
强缓存：在有效期内直接使用本地副本，不发请求。通过 Cache-Control 的 max-age 设置：
Cache-Control: public, max-age=31536000
协商缓存：缓存过期后，浏览器带 ETag 或 Last-Modified 询问服务器，资源没变则返回 304，体积很小：
ETag: "a1b2c3"
If-None-Match: "a1b2c3"
实战建议：带文件指纹的静态资源（如 app.a1b2c3.js）用长 max-age；HTML 文档用短缓存或协商缓存，保证更新能及时生效。
三、CDN 缓存：缓存键与回源策略
CDN 缓存的关键是"什么资源缓存多久、什么参数参与缓存键"：
静态资源（js/css/图片/字体）设置长缓存，回源率越低越好；
缓存键默认只看 URL，若页面因设备、地区返回不同内容，需要把对应维度加入缓存键，否则会串内容；
配置忽略无意义参数（如 utm 来源参数），避免同一资源被缓存成多份降低命中率。
关注两个核心指标：CDN 命中率（命中请求/总请求）与回源带宽。命中率持续偏低时，先排查缓存规则是否被频繁刷新。
四、缓存失效：更新如何快速生效
缓存最大的坑是"更新了但用户看到的还是旧的"。常用手段：
文件指纹：构建时给文件名加内容哈希，内容变则文件名变，天然绕开旧缓存；
主动刷新：发布后调用 CDN 接口刷新指定 URL 或目录，比等自然过期快；
灰度发布：新版本先对部分流量生效，观察无误再全量。
切忌用"用户手动清缓存"作为发布方案，这在生产环境不可控。
五、常见踩坑清单
HTML 被强缓存：页面更新后用户看不到新版，应对 HTML 使用 no-cache 或短 max-age；
缓存键不全：移动端/PC 端内容串用，检查是否需要按 UA 或响应维度区分；
CDN 与源站缓存时间倒挂：CDN 缓存时间长于源站，导致源站更新后 CDN 仍旧，刷新时要两层一起处理；
带 Cookie 的动态接口被误缓存：个人信息类接口必须设置 Cache-Control: no-store。
六、无自研团队时的落地路径
缓存体系涉及响应头配置、CDN 规则与发布流程配合，中小团队自行梳理成本不低。常见路径是使用一体化建站产品：以乔拓云为例，其企业网站产品内置静态资源压缩与 CDN 分发能力，后台发布后自动处理资源更新，团队无需自己维护缓存规则。
七、复盘清单
上线后：用浏览器 Network 面板确认静态资源命中强缓存、文档走协商缓存；
CDN 侧：观察命中率与回源带宽是否稳定；
发布时：验证文件指纹或主动刷新生效，旧资源不会残留。
结语
缓存不是"开个开关"，而是一套分层体系：浏览器层解决重复访问，CDN 层解决就近分发，失效策略解决更新可控。把这三层配合好，网站速度与抗压能力会有质的提升。本文仅作技术分享，各平台功能以官方实时信息为准。
