HTTP 缓存相关的响应头信息

Posted 2023-03-29

参考技术A

响应头信息有：

Cache-Control 是用来控制缓存的，比如缓存要不要开启，缓存时长是多少，要不要每次请求缓存前都需要校验等等。 ETag 和 Last-Modified 是用于缓存失效后的校验，它们都需要对应的请求头一起使用。

通常 Cache-Control 会搭配 ETag 或 Last-Modified 一起使用用于更好的控制缓存，当然也可以只使用其中一个。

Expires 头信息返回的值是一个时间日期，在这个日期之后响应被视为已过期。

从这里的定义可以看到它的优先级比 Cache-Control 低，如果响应有 Cache-Control 头信息则 Expires 头信息会被忽略。

这是因为 Cache-Control 和 ETag HTTP 1.1 新增加的响应头， Expires 和 Last-Modified HTTP 1.1 之前的响应头。至于新加的响应头的好处其中之一是控制更精确（Last-Modified 只到秒级别）。

ETag 是响应内容某个指定版本的一个标识符，通常可以用文件的 hash 或者某个固定规则的算法，比如文章最后修改时间的 MD5 等。

它的规范如下，W 开头规范是弱校验用的，这里就不展开了

ETag 另一个典型的用法是缓存未更改的资源

ETag 和 Last-Modified 是用来校验缓存用的，可以理解成缓存的一个ID，它们都有对应请求头， If-None-Match 和 If-Modified-Since ，服务端在发出响应之前会根据请求的头信息去匹配计算，比如请求头有 If-None-Match : \'ak1017\'，服务端在响应之前会计算档次响应的 ETag 和这个值相等就会响应一个 304 没有内容的响应，客户端在接收到 304 之后就会继续使用上次缓存的内容。达到节省流量，提升响应时间。

Last-modified and If-Modified-Since

this is resopone header and request header, they match each other,

ETag and If-None-Match

一个请求命中缓存会响应的状态

下面是一个响应头同时包含 Cache-Control 和 Last-Modified 的例子

下面的访问测试都是基于 chrome 浏览器 87.0.4280.88

下面是一个响应头同时包含 Cache-Control 和 ETag 的例子

这里的再次请求有时会遇到响应 200 但响应内容没有的情况
some | etag.css | 200 OK | stylesheet | 174 B 77.4 kB

设置 Cache-Control 后浏览器再次请求资源时候如果缓存没有过期则就直接使用缓存，在缓存过期后会向服务端发起请求，这时接收到一个 304 客户端继续使用上次的缓存内容并更新了缓存有效期。

下面是一个响应头只有 ETag 的例子

这里不设置 Cache-Control 浏览器默认也会把资源存入缓存，只是每次请求都会向远端服务器发起校验，然后接收到响应 304 继续使用上次的响应内容。

下面是一个响应头只有 Last-Modified 的例子

相比较只有 ETag 响应头的，这里只有 Last-Modified 响应头，再次请求都是直接使用缓存的内容，在测试中没发现资源有向远端发起校验，这里也没有设置对应的缓存时长，why？（这里只在设置的 Last-Modified 时间是已过期的情况，如果 Last-Modified 没有过期在过期之前访问还是会响应 304 ，只是在后续多次访问后会变成 memory cache ）

下面是一个响应头包含 Expires 和 Last-Modified 的例子

这里可以看到设置 Expires 和 Cache-Control 有同样的效果

下面是一个响应头设置 Cache-Control: no-store 和 ETag 的例子

设置为 no-store 的资源，浏览器端就不会启用缓存，每次都成远端获取最新的内容，且请求头不会追加对应的 If-None-Match

浏览器什么情况下会把请求的资源存入缓存？
只要请求到的响应头开启缓存（ Cache-Control: max-age=<number> 或 Expires ）或包含 ETag 响应头，或者即使没有设置 Cache-Control 浏览器都会把资源默认存入缓存，除非明确设置 Cache-Control: no-store 不需要浏览器存储缓存。