静态资源缓存策略与 Cache-Control 指令深度指南

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