HTTP缓存机制学习笔记
📅 2026年04月28日
📁 后端技术⏱ 1 分钟阅读
⭐ 重要
#HTTP
#缓存
#性能优化
#浏览器
📌 要点摘要: 系统整理HTTP缓存的工作原理、缓存策略配置方法及实际应用场景,包括强缓存与协商缓存的区别,Cache-Control、ETag、Last-Modified等头字段的使用。
缓存的核心思想
缓存是性能优化中最有效、成本最低的手段之一。合理的缓存策略可以:
- ✅ 减少网络带宽消耗
- ✅ 降低服务器压力
- ✅ 提升用户加载速度
- ✅ 改善离线体验
缓存分类
1. 强缓存
状态码:200 (from memory/disk cache)
不需要向服务器发送请求,直接使用本地缓存。
| 响应头 | 说明 | 优先级 |
|---|---|---|
Cache-Control: max-age=3600 |
缓存有效期(秒) | 最高 |
Expires: Wed, 21 Oct 2026 07:28:00 GMT |
过期时间点 | 最低 |
2. 协商缓存
状态码:304 (Not Modified)
需要向服务器验证缓存是否有效。
| 验证字段 | 说明 | 精度 |
|---|---|---|
ETag / If-None-Match |
文件哈希标识 | 高 |
Last-Modified / If-Modified-Since |
文件修改时间 | 低 |
缓存决策流程
浏览器请求资源 → 检查本地缓存 → 缓存过期?
↓ ↓
否 是
↓ ↓
使用本地缓存 发起验证请求 → 资源未修改?
↓
是 否
↓ ↓
304 更新有效期 200 返回新资源
最佳实践配置
| 资源类型 | Cache-Control配置 | 说明 |
|---|---|---|
| HTML页面 | no-cache |
每次都校验 |
| 静态资源(js/css/img) | max-age=31536000, immutable |
永久缓存,通过文件名哈希更新 |
| 接口数据 | max-age=60 |
短时间缓存 |
| 敏感数据 | no-store |
不缓存 |
常见误区
❌ 错误观点: 设置了max-age就永远不会发起请求
✅ 正确理解: 用户强制刷新、缓存被浏览器LRU淘汰都会导致重新请求
❌ 错误观点: 304响应完全没有开销
✅ 正确理解: 仍然有往返时间RTT开销,只是没有响应体传输
💡 思考
缓存的本质是在「数据新鲜度」和「性能」之间做权衡。没有完美的缓存策略,只有最适合业务场景的策略。
• ... 次阅读