HTTP缓存是Web性能优化的核心技术，它能显著减少网络请求，提升页面加载速度，并降低服务器负载。
一、缓存核心概念
1、缓存的价值
- 性能提升： 减少网络延迟，加快资源加载
- 带宽节省： 降低数据传输量
- 服务器减压： 减少重复请求处理
- 离线体验： 支持离线访问（Service Worker）
2、缓存位置
| 缓存类型 | 存储位置 | 生命周期 | 控制方式 |
|---|---|---|---|
| 浏览器缓存 | 客户端内存/磁盘 | 用户手动清除 | HTTP头部 |
| 代理缓存 | 中间服务器 | 配置决定 | 共享缓存指令 |
| 网关缓存 | 反向代理服务器 | 配置决定 | 服务器配置 |
| CDN缓存 | 边缘节点 | TTL设置 | CDN控制台 |
二、缓存控制机制
1、缓存控制头字段
| HTTP头 | 类型 | 功能说明 | 示例值 |
|---|---|---|---|
| Cache-Control | 请求/响应 | 主缓存控制指令 | max-age=3600, public |
| Expires | 响应 | 资源过期时间（HTTP/1.0） | Expires: Wed, 21 Oct 2025 07:28:00 GMT |
| ETag | 响应 | 资源版本标识符 | ETag: “33a64df551425fcc55e4d42a148795d9f25f89d4” |
| Last-Modified | 响应 | 资源最后修改时间 | Last-Modified: Tue, 15 Nov 2022 12:45:26 GMT |
| If-None-Match | 请求 | 携带ETag验证缓存 | If-None-Match: “33a64df5…” |
| If-Modified-Since | 请求 | 携带修改时间验证缓存 | If-Modified-Since: Tue, 15 Nov 2022 12:45:26 GMT |
| Vary | 响应 | 指定缓存变体 | Vary: User-Agent, Accept-Encoding |
2、Cache-Control 指令详解
| 指令 | 适用对象 | 说明 |
|---|---|---|
| max-age= | 响应 | 资源最大缓存时间（秒） |
| s-maxage= | 响应 | 共享缓存（如CDN）的最大缓存时间 |
| public | 响应 | 允许任何缓存存储响应 |
| private | 响应 | 仅允许浏览器缓存 |
| no-cache | 请求/响应 | 使用缓存前必须验证有效性 |
| no-store | 请求/响应 | 禁止存储任何缓存 |
| must-revalidate | 响应 | 过期后必须向源服务器验证 |
| immutable | 响应 | 资源永不变（适用于版本化资源） |
| stale-while-revalidate | 响应 | 允许使用过期缓存期间后台验证 |
三、缓存工作流程
1、强缓存（不发送请求）
2、协商缓存（发送验证请求）
四、缓存策略设计
1、静态资源缓存策略
# 版本化资源（永久缓存）
Cache-Control: public, max-age=31536000, immutable
# 非版本化资源（短期缓存）
Cache-Control: public, max-age=604800
2、动态内容缓存策略
# 个性化内容（不缓存）
Cache-Control: private, no-store
# 半动态内容（短期缓存）
Cache-Control: public, max-age=60, must-revalidate
3、缓存更新策略
| 策略 | 实现方式 | 适用场景 |
|---|---|---|
| 文件名指纹 | app.abc123.js | JS/CSS/图片等静态资源 |
| 查询参数版本 | style.css?v=20230101 |