阅读 97

面试官常问的HTTP缓存到底是什么?

面试官常问的HTTP缓存到底是什么?

当我们第一次进入一个网页后再次刷新时,速度会比首次加载快很多,很多人知道这是浏览器缓存,但却说不出来具体一二,而这恰恰就是面试官非常爱问的问题....

HTTP缓存是什么

首先我们先来搞懂HTTP缓存是什么?

客户端在向服务器发起请求时,会先抵达浏览器缓存,如果浏览器缓存中有需要的资源文件的话,就可以直接从缓存中取出需要的文件,而不用发送请求,这样做的好处是优化浏览器性能,避免重复请求。显然,http缓存都是从第二次请求开始的。

浏览器第一次请求资源(html、css、js...)时,服务器返回资源,并返回了header头部信息,其中包括了缓存参数。当浏览器第二次请求时,浏览器判断这些请求参数,命中强缓存就直接返回状态码200,否则就把请求参数加到header头中发送给服务器,看是否命中协商缓存(弱缓存),命中则返回304,否则服务器会返回新的资源。

强缓存

强缓存是利用Cache-Control或者Expires(低版本浏览器使用Expires),让服务器为文件设置一个过期时间,在这个时间内可以将这些内容视为最新的。 如果时间未过期,则命中强缓存,不需要向服务器发送请求,直接使用缓存文件。

我们来看一个实际的Response Headers

image.png

Cache-Control 常见的取值有:

public: 服务器端和浏览器端都能缓存

private: 只能浏览器端缓存

no-cache: 强制浏览器在使用cache拷贝之前先提交一个http请求到源服务器进行确认。http请求没有减少,会减少一个响应体(文件内容),这种个选项类似弱缓存,即不走强缓存

only-if-cached: 表明客户端只接受已缓存的响应,并且不要向原始服务器检查是否有更新的拷贝。

到期设置:

max-age=60:设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。 这里是60秒

其他设置:

no-store: 不缓存,使用协商缓存

must-revalidate: 缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。

协商缓存(弱缓存)

弱缓存是利用ETagLast-Modified,当浏览器第一次向服务器发送请求时,会在响应头中返回协商缓存的头属性:ETagLast-Modified,其中ETag返回的是一个hash值,Last-Modified返回的是GMT格式的最后修改时间。

image.png 然后浏览器在第二次发送请求的时候,会在请求头中带上与ETag对应的If-Not-Match,其值就是响应头中返回的ETag的值,Last-Modified对应的If-Modified-Since。服务器在接收到这两个参数后会做比较,如果返回的是状态码304,则说明请求的资源没有修改,浏览器可以直接在缓存中取数据,否则,服务器会返回状态码200,并直接返回数据。

来看实际的弱缓存Response HeadersRequest Headers

image.png

image.png

推荐阅读

  1. 浏览器的强缓存与弱缓存
  2. 一文读懂HTTP缓存(超详细)
文章分类
前端
文章标签