博客

什么是HTTP缓存？

  • Post category:云计算

HTTP缓存是指在客户端（一般是浏览器端）中缓存部分或全部网页资源，在用户请求同一资源时，直接从本地缓存中获取，避免了再次向服务器请求资源，从而加快网页加载速度，减轻服务器负担。

HTTP缓存机制是通过在HTTP请求和响应中使用特定的头部信息达成的。主要的缓存头信息有Expires、Cache-Control和Last-Modified。

Expires

Expires头部定义了一个日期/时间，缓存过期时间在该时间之后，过期缓存应该被删除。例如：

Expires: Thu, 01 Dec 2022 16:00:00 GMT

在服务端设置Expires的值为未来的时间点时，浏览器会在过期时间之前从本地缓存中获取资源。

Cache-Control

Cache-Control头部提供了更精细的控制缓存行为的选项。对于新的HTTP/1.1协议，Cache-Control替换了过时的Expires头部。通过设置Cache-Control的值，可以控制缓存行为的不同方面。例如：

Cache-Control: public, max-age=31536000

该头部告诉浏览器该资源可以被所有缓存持有和共享，并且在接下来的一年中缓存有效。浏览器会在该时间段内从本地缓存中获取资源。

Last-Modified

Last-Modified头部指示资源最后一次修改的时间戳。例如：

Last-Modified: Mon, 23 May 2022 12:23:00 GMT

当客户端第一次请求资源时，服务器会在响应中包含Last-Modified头，客户端缓存了该值；当之后的请求时，客户端会将其包含在If-Modified-Since请求头部中，告诉服务器上一次请求时获得的资源时间。服务器将比较请求头中的时间戳和实际最后修改时间戳，如果匹配，服务器将返回304未修改的响应头，告诉客户端从缓存中获取资源。

下面是两个简短的示例：

示例1: 缓存HTML文件

HTTP/1.1 200 OK
Date: Thu, 01 Dec 2022 15:45:00 GMT
Cache-Control: public, max-age=31536000
Expires: Fri, 01 Dec 2023 15:45:00 GMT
Content-Type: text/html; charset=utf-8

<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

在服务端，我们为html文件设置了public的Cache-Control，表示所有的缓存都可以缓存该资源。max-age设置了资源的有效期，这里我们设置为一年。代表浏览器将会在一年内从本地缓存中获取该html文件。

示例2: 缓存图片

HTTP/1.1 200 OK
Date: Thu, 01 Dec 2022 15:45:00 GMT
Cache-Control: public, max-age=31536000
Expires: Fri, 01 Dec 2023 15:45:00 GMT
Content-Type: image/png
Content-Length: 5846
Last-Modified: Mon, 23 May 2022 12:23:00 GMT
Etag: "abcde12345"

(图片的二进制数据)

在服务端，我们为图片设置了public的Cache-Control，表示所有的缓存都可以缓存该资源。max-age设置了资源的有效期，这里我们设置为一年。最后修改时间通过Last-Modified头来进行缓存。当客户端第一次请求带有Last-Modified的头文件时，它将Cache-Control和Expires同时缓存下来。当客户端再次请求相同的图片时，将会发送一个If-Modified-Since头部，该头部包含上次请求的Last-Modified时间戳。如果该图片未被修改过，则服务器返回304，告诉浏览器从本地缓存中获取图片。

参考资料：

Tags: