强缓存与协商缓存：解密 HTTP 缓存机制

HTTP 的强缓存与协商缓存：简明易懂

我们每天在互联网上浏览网页时，浏览器都会向服务器请求各种资源，例如 HTML、CSS、JavaScript 和图像。为了优化用户体验并减少服务器负载，浏览器会缓存这些资源。

HTTP 协议提供了两种缓存机制：强缓存和协商缓存。它们的工作方式不同，根据不同的情况提供不同的优势。

强缓存

强缓存机制下，浏览器会将资源缓存到本地，并在下次请求相同资源时直接从本地加载，而无需向服务器发送请求。

强缓存的生效条件由服务器发送的以下两个响应头控制：

• Cache-Control： 允许服务器指定资源的缓存时长，单位为秒。
• Expires： 明确指定资源的过期时间，是一个绝对时间戳。

工作原理：

1. 浏览器第一次请求资源。
2. 服务器响应并包含 Cache-Control 和 Expires 头。
3. 浏览器将资源缓存到本地。
4. 当再次请求同一资源时，浏览器会首先检查本地缓存是否过期。
5. 如果缓存未过期，浏览器将直接从本地加载资源，而不会向服务器发送请求。

协商缓存

协商缓存机制下，浏览器在再次请求资源时，会向服务器发送一个条件请求。服务器会根据请求的条件决定是否返回资源。

协商缓存的生效条件由以下请求头控制：

• If-Modified-Since： 浏览器发送资源上次修改时间。
• If-None-Match： 浏览器发送资源的 ETag（实体标签）。

工作原理：

1. 浏览器第一次请求资源。
2. 服务器响应并包含 ETag 和 Last-Modified 头。
3. 浏览器将资源缓存到本地。
4. 当再次请求同一资源时，浏览器会发送一个条件请求，其中包含 If-Modified-Since 或 If-None-Match 头。
5. 如果资源未被修改，服务器会响应一个 304 Not Modified 状态码。
6. 浏览器会继续使用本地缓存的资源。
7. 如果资源已修改，服务器会响应一个 200 OK 状态码并返回最新版本。

两者的区别

特征	强缓存	协商缓存
缓存机制	直接从本地加载	向服务器发送条件请求
生效条件	Cache-Control 和 Expires 头	If-Modified-Since 或 If-None-Match 头
效率	更高效，减少服务器负载	次之，但更灵活
适用场景	缓存较大、不易更改的资源	缓存较小、经常更新的资源

总结

HTTP 的强缓存和协商缓存机制各有优缺点，根据不同的场景选择适当的机制可以优化网页加载速度并改善用户体验。