首页 >web前端 >js教程 >HTTP 缓存：您需要了解的一切

HTTP 缓存：您需要了解的一切

DDD原创: 2025-01-20 02:32:14242浏览

HTTP Caching : Everything You Need to Know

HTTP缓存机制详解

HTTP缓存是一种通过降低服务器负载、加快客户端响应速度和节省网络带宽来提升网页性能的技术。HTTP缓存主要分为两种类型：强制缓存和协商缓存。

强制缓存

强制缓存允许客户端在指定的时间段内直接使用本地缓存的资源，无需向服务器发送请求。强制缓存由服务器指定的响应头控制，主要通过两个字段：Cache-Control 和 Expires。

Cache-Control

Cache-Control 是一个通用头部，它指定了资源的最大有效期 (max-age)、缓存是否可以共享 (public 或 private) 以及是否允许修改 (no-cache 或 no-store)。

示例：

<code>Cache-Control: max-age=3600</code>

以上表示资源有效期为 3600 秒，可以缓存。

Expires

Expires 是一个已弃用的字段，它指定缓存的绝对过期时间。

示例：

<code>Expires: Wed, 23 Aug 2024 03:36:26 GMT</code>

这意味着资源将在 2024 年 8 月 23 日凌晨 3:36:26 过期。

如果同时存在 Cache-Control 和 Expires，则 Cache-Control 优先。

协商缓存

协商缓存要求客户端在每次请求时都检查服务器资源是否已更新。如果未更新，服务器将返回 304 状态码和空响应正文，允许客户端继续使用本地缓存。如果已更新，服务器将返回 200 状态码和新的资源，替换本地缓存。协商缓存涉及服务器和客户端的头部，主要是 Last-Modified/If-Modified-Since 和 ETag/If-None-Match。

Last-Modified/If-Modified-Since

Last-Modified 是一个服务器端字段，指示资源的最后修改时间。示例：

<code>Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT</code>

这意味着资源最后修改于 2024 年 8 月 22 日凌晨 2:36:26。

If-Modified-Since 是一个客户端字段，指示资源的最后检索时间。示例：

<code>If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT</code>

这意味着客户端在 2024 年 8 月 22 日凌晨 2:36:26 检索了资源。

如果两个时间戳相等或 Last-Modified 更早，则资源未更新。如果 Last-Modified 更晚，则资源已更新。

ETag/If-None-Match

ETag 是一个服务器端字段，表示资源的唯一标识符。示例：

<code>ETag: '5d3a9f6d-1f86'</code>

这表示资源的标识符是“5d3a9f6d-1f86”。

If-None-Match 是一个客户端字段，指示资源的预期标识符。示例：

<code>If-None-Match: '5d3a9f6d-1f86'</code>

这表示客户端期望资源标识符为“5d3a9f6d-1f86”。

如果两个值匹配，则资源未更新。如果它们不同，则资源已更新。

HTTP缓存最佳实践

结合协商缓存和强制缓存可以有效减少不必要的网络请求，同时确保用户始终拥有最新内容。

通用方法：

强制缓存: 对于静态资源（例如 CSS、JS、图像），设置较长的缓存持续时间。这允许浏览器直接从本地存储检索资源，而无需联系服务器。

协商缓存: 对于可能更改的资源，使用协商缓存。浏览器将发送请求以检查资源是否已更改。如果没有，服务器将返回 304 未修改响应，允许浏览器使用本地缓存。如果资源已更改，服务器将返回 200 OK 和更新的资源。

示例实现：

假设我们使用 Express.js 作为后端框架：

<code>Cache-Control: max-age=3600</code>

关键考虑因素

版本控制: 为了最大限度地提高强制缓存的有效性，请在资源 URL 中包含版本信息，例如 /static/js/main.2024082301.js。当资源更新时，更改版本号以确保用户始终获得最新版本。
协商缓存的成本: 虽然协商缓存减少了不必要的数据传输，但它仍然需要网络往返。对于很少更改的资源，强制缓存可能更有效。