HTTP 缓存策略速查
HTTP 缓存控制速查：Cache-Control、ETag、Last-Modified 等指令详解。
💾 HTTP Cache Strategy Quick Reference
📐 工作原理与说明
HTTP 缓存机制与策略速查。
- 强缓存：
Cache-Control（max-age、no-cache、no-store、immutable）与Expires，命中不发请求。 - 协商缓存：
ETag/If-None-Match与Last-Modified/If-Modified-Since，命中返回 304。 - 策略：带内容 hash 的静态资源用长 max-age + immutable；HTML 入口用 no-cache 保证及时更新。
- Vary：决定缓存键是否包含某请求头，误用会导致缓存错配或击穿。
Browse HTTP caching headers and directives in your browser — understand Cache-Control and ETag.
📚 深度解析：HTTP 缓存策略速查
💡 常见使用场景
- 配置静态资源缓存：给带哈希文件名的 JS/CSS 设 Cache-Control: max-age=31536000, immutable，HTML 则用 no-cache 配合 ETag 协商，兼顾更新与速度。
- 排查「改了没生效」：看响应是命中强缓存（from disk cache）还是重新校验（304），据此判断该改缓存策略还是加版本号。
示例
`Cache-Control: max-age=3600` 与 `ETag` 协商缓存配合。
❓ 常见问题（FAQ）
- max-age 和 s-maxage 有什么区别？
- max-age 对浏览器生效；s-maxage 只对共享缓存（CDN、代理）生效，且优先级高于 max-age。典型用法是给 HTML 设 max-age=0, s-maxage=600：浏览器每次重新校验，CDN 缓存 10 分钟，既保证用户能及时看到更新，又显著降低源站压力。
- immutable 有什么用？
- 它告诉浏览器在 max-age 期间连条件请求都不要发（刷新页面也不必校验）。只对带内容哈希、永不变更的文件名使用——一旦文件名不变而内容更新，用户会被旧缓存卡住直到过期，比不设 immutable 更难挽回。
⚠️ 使用说明与注意事项
- 本工具纯前端运行，数据不会上传到服务器
- 建议在主流浏览器（Chrome/Safari/Firefox/Edge）中使用
- 计算结果仅供参考，请以实际应用场景为准
已复制
▼
工具简介
HTTP 缓存策略速查。专为开发者打造的在线工具，纯前端运行，代码不离开浏览器。