HTTP缓存

date

Jun 17, 2023

slug

HTTP缓存

status

Published

HTTP 浏览器缓存机制

HTTP 浏览器缓存机制是 HTTP/1.0 新增的，缓存会根据请求保存输出内容的副本，例如 html 页面，图片，文件，当下一个请求来到的时候：如果是相同的 URL ，缓存直接使用副本响应访问请求，或者询问服务器后直接使用副本，减少响应报文大小。

缓存的优点：

第一次访问本地无缓存，故向服务器发起请求，浏览器会保存响应副本。

浏览器在拿到对应的缓存文件后，根据 响应头 字段，浏览器作出不同的动作。由此分出不同的缓存类型：强缓存和协商缓存。

强缓存是根据响应头中的 Cache-Control (HTTP/1.1添加) 和 Expires （HTTP/1.0添加）字段做判断，二者同时存在时以 Cache-Control 作为判断。 Expires 是绝对的过期时间。受限于本地时间，可能存在不准确问题，格式如下：

Cache-Control 当值设为 max-age=XXX 时，则代表在这个请求正确返回时间（浏览器也会记录下来）的 XXX秒 内再次加载资源，就会命中强缓存。 max-age 的单位是秒。格式如下：

Cache-Control 有以下几个比较常用的设置值：

在命中强缓存后，浏览器不会向服务器发送任何请求，直接从本地缓存中读取文件并返回 Status Code: 200 OK

优先访问 memory cache ,其次是 disk cache, 最后是请求网络资源，memory cache 在浏览器关闭后就被清空。

当未命中强缓存时，即在 Cache-Control 的 max-age 时间已过，Cache-Control 为 no-cache ，或 Expires 绝对过期时间之外。此时浏览器会带上缓存中响应头里的几个字段，向服务器发起请求，让服务器来决定缓存是否可用。

缓存中的响应头的关于协商缓存的两个字段：ETag 和 Last-Modified，请求时这两个字段的值会以不同的字段名带回去，对应关系如下：

Etag 是属于 HTTP 1.1属性，它就像一个指纹，资源变化都会导致 ETag 变化，跟最后修改时间没有关系，ETag 可以保证每一个资源是唯一的。

If-None-Match 会将上次返回的 Etag 发送给服务器，询问该资源的 Etag 是否有更新。当有变动就会发送新的资源回来，状态码为 200，浏览器使用新资源；若服务器判断为缓存可用，则状态码为 304，响应体为空，浏览器使用缓存。

Last-Modified 缓存文件最后修改日期

If-Modified-Since 上次返回的 Last-Modified 的值，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。无更新则返回状态码为 304，响应体为空，浏览器使用缓存。

至此，整个缓存的流程如下

最后借用一则故事故事来加深理解