23、浏览器缓存

58 阅读3分钟

浏览器缓存

浏览器缓存主要指的是 HTTP 缓存,浏览器本质是将资源缓存到本地内存和磁盘中的

HTTP 缓存只支持 GET 响应,其他类型的响应无法缓存

简单理解缓存:

优点:下次资源加载时,可以直接从缓存里面拿,这样节省请求时间

缺点:未及时更新缓存,容易导致资源过老

缓存分类

强缓存 - 简单理解:

协商(对比)缓存 - 简单理解:

强制缓存优先级高于协商(对比)缓存,当执行强制缓存的规则时,如果缓存生效,直接使用缓存,不再执行对比缓存规则。

浏览器的缓存规则是服务器通过响应头返回的

强制缓存

特点:满足强制缓存后,无需发起 http 请求

强制缓存用到的响应头为:Expires 和 Cache-Control

Expires:缓存到期时间,若下次请求时间小于该值,则直接使用缓存数据,无需发起 http 请求

Cache-Control:控制缓存策略

private: 客户端可以缓存(默认)

public:客户端和服务器等都可以缓存

max-age=xxx:缓存内容过期时间(秒)

no-cache:使用对比缓存策略

no-store:禁止缓存

举例:

Cache-Control 仅使用了 max-age=31536000,则默认为 private(仅客户端可以缓存),并且 31536000 秒(365天)后过期,再次期间直接用缓存数据

协商(对比)缓存

特点:始终都会发起 http 请求

协商缓存例子:

第一次正常访问,第二次协商缓存生效,则状态为304,对应的 size、time 也大大减小

原因是:协商缓存生效后,只会返回 header 部分,通过状态码告知客户端可使用缓存数据

协商缓存规则是在客户端与服务端传递的

  1. 规则一:Etag / If-None-Match

服务器返回响应头:Etag,值为当前资源在服务器的唯一标志

客户端请求响应头:If-None-Match,值为 Etag 的值,服务器发现有这个请求头后,则与该资源最新标志对比

若一样,则资源无修改,返回 304,客户端继续使用缓存数据

若不一样,则资源有修改,返回最新资源,状态码为 200,客户端使用返回的数据

  1. 规则二:Last-Modified / If-Modified-Since

服务器返回响应头:Last-Modified,值为当前资源最后修改时间

客户端请求响应头:If-Modified-Since,值为 Last-Modified 的值,服务器发现有这个请求头后,则与该资源最新修改时间对比

若小于等于 If-Modified-Since,则资源无修改,返回 304,客户端继续使用缓存数据

若大于 If-Modified-Since,则资源有修改,返回最新资源,状态码为 200,客户端使用返回的数据

总结