静态资源缓存策略与 Cache-Control 指令深度指南
静态资源缓存策略与 Cache-Control 指令深度指南
在现代 Web 架构中，合理的缓存策略能够减少 90% 以上的网络开销，显著提升首屏加载速度。本指南将策略设计与 HTTP 协议指令进行了高度集成，旨在提供从设计思路到技术落地的一站式参考。
1 静态资源缓存策略矩阵 (策略层)
本表展示了在不同业务场景下，如何组合使用各种技术手段来达到最优平衡。
| 资源类型 | 核心策略 | Cache-Control 建议组合 | 技术要点与案例 |
|---|---|---|---|
| 入口 HTML | 协商缓存 | no-cache | 要点：必须每次回源校验。如果 HTML 被强缓存，用户将无法及时获取更新后的 JS/CSS 指纹。 案例： index.html |
| 带 Hash 的静态文件 | 永久强缓存 | public, max-age=31536000, immutable | 要点：利用内容哈希（Content Hash）实现版本控制。文件名变了即视为新资源。 案例： main.a7b8c9.js |
| 固定路径图片/图标 | 定期强缓存 | public, max-age=86400, must-revalidate | 要点：路径固定，建议设置 1 天至 1 周的缓存，过期后强制校验。 案例： logo.png,favicon.ico |
| 动态配置/敏感接口 | 不缓存 | no-store | 要点：禁止任何节点存储，确保数据的绝对实时性与安全性。 案例： /api/user/balance,config.json |
| 公共库 (CDN 分发) | 中转层缓存 | public, s-maxage=2592000 | 要点：利用s-maxage指定 CDN 节点的缓存时长，减轻源站负载。案例： vue.global.prod.js |
2 Cache-Control 指令全解析 (协议层)
Cache-Control是实现上述策略的核心工具。它是一个层层递进的过滤模型：
| 指令类别 | 指令 (Directive) | 详细技术含义 | 避坑指南 |
|---|---|---|---|
| 可缓存性 | public | 资源可被浏览器及 CDN、代理服务器等任何节点缓存。 | 默认值，通常无需特意声明，除非需配合s-maxage。 |
private | 资源仅允许浏览器缓存，严禁 CDN 等中间节点存储。 | 涉及用户个人隐私的页面务必开启。 | |
no-cache | 先校验再使用。必须向服务器发起请求，验证 ETag 无误后方可使用缓存。 | 误区：它并不代表不缓存，它是“协商缓存”的开关。 | |
no-store | 彻底禁止缓存。任何地方（磁盘/内存/中间节点）均不准存储副本。 | 误区：用于阅后即焚，是最高级别的安全限制。 | |
| 有效期 | max-age=N | 设置强缓存的有效时长（秒）。 | 优先级高于旧版的Expires指令。 |
s-maxage=N | 仅针对 CDN 等代理服务器有效，会覆盖max-age。 | 如果想让 CDN 存久一点、浏览器存短一点，用这个。 | |
| 重新验证 | must-revalidate | 缓存过期后，必须回源校验成功才能用，断网时宁可报错也不用旧数据。 | 保证数据一致性的关键，防止浏览器“擅自”展示过期数据。 |
proxy-revalidate | 作用同上，但仅约束 CDN 等中间代理服务器。 | 常用于多级分发网络的数据同步控制。 | |
| 性能优化 | immutable | 告知浏览器该资源永不更新。即便用户手动刷新页面，也不回源校验。 | 性能杀手锏：配合 Hash 文件使用，可省去大量的 304 请求。 |
stale-while-revalidate=N | 允许先给用户看过期旧数据，同时在后台异步发起校验更新。 | 用户体验：消除校验请求带来的毫秒级阻塞感。 | |
no-transform | 强制代理服务器不得转换资源格式（如禁止运营商压缩图片）。 | 保护图片原始画质和 JS 脚本的完整性。 |
3 缓存生效逻辑与全生命周期
当一个请求发生时，缓存遵循从近到远的优先级原则：
- Service Worker: 开发者控制的离线缓存。
- 浏览器强缓存: 直接由
max-age决定，不产生网络请求。 - CDN 边缘缓存: 如果浏览器没有，请求命中 CDN 节点。
- 协商缓存: 如果以上都过期，浏览器携带
ETag询问服务器文件是否变更。- 304 Not Modified: 文件没变，只传输 Header，极省流量。
- 200 OK: 文件已变，下载全新内容。
4 综合实战建议
4.1 Nginx 配置示例
# 方案 A：HTML 首页 - 保证实时更新 location / { add_header Cache-Control "no-cache, must-revalidate"; } # 方案 B：带 Hash 的静态资源 - 追求极致性能 location ~* \.(js|css|png|jpg|woff2)$ { expires 365d; add_header Cache-Control "public, max-age=31536000, immutable"; }