解释一下浏览器缓存中的强缓存和协商缓存的概念及其区别。
约 1086 字大约 4 分钟
2025-03-15
浏览器缓存是提升网页加载性能的重要机制,主要包括强缓存和协商缓存两种策略。它们的主要目的是减少网络请求,加快资源加载速度。以下是强缓存和协商缓存的详细解释及其区别:
一、强缓存(Strong Cache)
概念: 强缓存是指浏览器在请求资源时,先检查本地缓存是否有效。如果缓存有效,则直接使用缓存资源,不会向服务器发送请求。
实现方式: 强缓存通过以下 HTTP 响应头实现:
Cache-Control
:max-age=<seconds>
:指定资源的最大缓存时间(相对时间)。no-cache
:禁用强缓存,直接进入协商缓存。no-store
:完全禁用缓存。public
:资源可以被任何缓存(如浏览器、CDN)缓存。private
:资源只能被客户端缓存。
Expires
:指定资源的过期时间(绝对时间),优先级低于Cache-Control
。
工作流程
- 浏览器请求资源时,先检查本地缓存。
- 如果缓存未过期(根据
Cache-Control
或Expires
),则直接使用缓存资源。 - 如果缓存已过期,则进入协商缓存流程。
示例
HTTP/1.1 200 OK Cache-Control: max-age=3600 Expires: Wed, 25 Oct 2023 12:00:00 GMT
二、协商缓存(Conditional Cache)
概念: 协商缓存是指浏览器在强缓存失效后,向服务器发送请求,服务器根据请求头判断资源是否更新。如果资源未更新,则返回 304 状态码,浏览器使用本地缓存;如果资源已更新,则返回 200 状态码和新资源。
实现方式
协商缓存通过以下 HTTP 请求头和响应头实现:Last-Modified
/If-Modified-Since
:Last-Modified
:服务器返回的资源最后修改时间。If-Modified-Since
:浏览器发送请求时携带该头,值为上次响应中的Last-Modified
。
ETag
/If-None-Match
:ETag
:服务器返回的资源唯一标识(通常是哈希值)。If-None-Match
:浏览器发送请求时携带该头,值为上次响应中的ETag
。
工作流程
- 浏览器请求资源时,携带
If-Modified-Since
或If-None-Match
。 - 服务器检查资源是否更新:
- 如果未更新,返回 304 状态码,浏览器使用本地缓存。
- 如果已更新,返回 200 状态码和新资源。
- 浏览器请求资源时,携带
示例
# 请求头 GET /resource HTTP/1.1 If-None-Match: "abc123" If-Modified-Since: Wed, 25 Oct 2023 10:00:00 GMT # 响应头(未更新) HTTP/1.1 304 Not Modified ETag: "abc123" Last-Modified: Wed, 25 Oct 2023 10:00:00 GMT # 响应头(已更新) HTTP/1.1 200 OK ETag: "def456" Last-Modified: Wed, 25 Oct 2023 11:00:00 GMT
三、强缓存与协商缓存的区别
特性 | 强缓存 | 协商缓存 |
---|---|---|
是否发送请求 | 不发送请求,直接使用缓存 | 发送请求,服务器判断是否使用缓存 |
HTTP 状态码 | 200(from cache) | 304(Not Modified) |
实现机制 | Cache-Control 、Expires | Last-Modified / If-Modified-Since 、ETag / If-None-Match |
缓存优先级 | 优先检查强缓存,失效后再进入协商缓存 | 强缓存失效后触发 |
适用场景 | 静态资源(如图片、CSS、JS) | 频繁更新的资源(如 HTML) |
四、缓存策略的最佳实践
强缓存
- 对静态资源(如图片、CSS、JS)设置较长的
max-age
(如 1 年)。 - 使用
Cache-Control: public
允许 CDN 缓存资源。
- 对静态资源(如图片、CSS、JS)设置较长的
协商缓存
- 对频繁更新的资源(如 HTML)禁用强缓存(
Cache-Control: no-cache
),启用协商缓存。 - 使用
ETag
代替Last-Modified
,因为ETag
更精确。
- 对频繁更新的资源(如 HTML)禁用强缓存(
缓存更新
- 通过文件名哈希(如
app.abc123.js
)或版本号(如app.v1.js
)强制更新缓存。 - 使用
Cache-Control: no-store
禁止缓存敏感数据。
- 通过文件名哈希(如
五、总结
- 强缓存:通过
Cache-Control
和Expires
实现,浏览器直接使用缓存资源,不发送请求。 - 协商缓存:通过
Last-Modified
/If-Modified-Since
和ETag
/If-None-Match
实现,浏览器发送请求,服务器判断是否使用缓存。 - 区别:强缓存不发送请求,协商缓存发送请求并返回 304 状态码。
- 最佳实践:结合强缓存和协商缓存,合理设置缓存策略以提升性能。
更新日志
2025/8/24 08:17
查看所有更新日志
e7112
-1于