HTTP缓存机制与缓存过期判断
一、HTTP缓存概述
HTTP缓存是一种性能优化机制,通过在客户端或中间代理存储资源的副本,减少对服务器的请求,从而加快页面加载速度,降低服务器负载。
二、缓存位置
- 私有缓存(浏览器缓存):单个用户专用
- 共享缓存(代理缓存/CDN):多个用户共享
三、HTTP缓存控制头
1. 缓存控制头(Cache-Control)
这是HTTP/1.1中控制缓存的主要机制,常用指令:
http
Cache-Control: max-age=3600, public, must-revalidate
关键指令:
max-age:资源被认为新鲜的最大时间(秒)s-maxage:共享缓存(如CDN)的最大新鲜时间public:响应可以被任何缓存存储private:响应只能被私有缓存存储no-cache:每次使用前必须向服务器验证no-store:禁止任何缓存must-revalidate:过期后必须向服务器验证immutable:资源永不变,适合版本化资源
2. 过期头(Expires)
HTTP/1.0的缓存机制,指定绝对过期时间:
http
Expires: Wed, 21 Oct 2023 07:28:00 GMT
四、服务器判断缓存是否过期的机制
1. 基于时间的过期判断(强制缓存)
服务器设置资源的新鲜期(freshness lifetime),浏览器在此期限内直接使用缓存:
javascript
// 新鲜期计算逻辑
function isCacheFresh(response) {
// 优先使用 Cache-Control 的 max-age
if (response.headers['Cache-Control']?.includes('max-age=')) {
const maxAge = parseInt(response.headers['Cache-Control'].match(/max-age=(\d+)/)[1]);
const age = getCurrentAge(response); // 计算当前缓存年龄
return age < maxAge;
}
// 其次使用 Expires
if (response.headers['Expires']) {
const expiresDate = new Date(response.headers['Expires']);
const now = new Date();
return now < expiresDate;
}
// 启发式过期(当没有明确指示时,浏览器自行估算)
return false;
}
2. 验证机制(协商缓存)
当缓存过期或需要验证时,浏览器向服务器发送验证请求:
a) Last-Modified / If-Modified-Since
http
# 第一次请求,服务器响应
HTTP/1.1 200 OK
Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT
Cache-Control: max-age=3600
# 缓存过期后,浏览器发送验证请求
GET /resource.jpg HTTP/1.1
If-Modified-Since: Wed, 21 Oct 2023 07:28:00 GMT
# 服务器响应(未修改)
HTTP/1.1 304 Not Modified
# 不返回内容体,浏览器使用缓存
b) ETag / If-None-Match(更精确)
http
# 第一次请求
HTTP/1.1 200 OK
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Cache-Control: max-age=3600
# 缓存过期后
GET /resource.jpg HTTP/1.1
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
# 资源未改变
HTTP/1.1 304 Not Modified
五、缓存验证流程
graph TD
A[浏览器发起请求] --> B{检查本地缓存}
B -->|无缓存| C[向服务器请求]
B -->|有缓存| D{检查新鲜度
(未过期)} D -->|新鲜| E[直接使用缓存
(不请求服务器)] D -->|不新鲜| F[准备验证请求] F --> G{服务器有设置ETag?} G -->|是| H[添加 If-None-Match 头] G -->|否| I{服务器有设置 Last-Modified?} I -->|是| J[添加 If-Modified-Since 头] I -->|否| C H --> K[发送验证请求] J --> K K --> L{服务器验证} L -->|未修改| M[返回 304 Not Modified
浏览器使用缓存] L -->|已修改| N[返回 200 + 新内容
更新缓存] C --> O[返回 200 + 新内容] O --> P[存储到缓存]
(未过期)} D -->|新鲜| E[直接使用缓存
(不请求服务器)] D -->|不新鲜| F[准备验证请求] F --> G{服务器有设置ETag?} G -->|是| H[添加 If-None-Match 头] G -->|否| I{服务器有设置 Last-Modified?} I -->|是| J[添加 If-Modified-Since 头] I -->|否| C H --> K[发送验证请求] J --> K K --> L{服务器验证} L -->|未修改| M[返回 304 Not Modified
浏览器使用缓存] L -->|已修改| N[返回 200 + 新内容
更新缓存] C --> O[返回 200 + 新内容] O --> P[存储到缓存]
总结
服务器判断缓存是否过期主要依赖两个机制:
- 时间基准 :通过
Cache-Control: max-age或Expires设置新鲜期 - 验证基准 :通过
ETag/If-None-Match或Last-Modified/If-Modified-Since验证内容是否变更
合理配置缓存策略可以显著提升网站性能,减少服务器负载,改善用户体验。