面试干货-浏览器之缓存机制(文末附demo链接)

872 阅读6分钟

话不多说,先上一张流程图,了解有缓存时,请求发出到拿到结果经历了什么·~~

image.png

开始正文

浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:

一、HTTP报文

1. HTTP请求(Request)报文

报文格式为:请求行 – HTTP头(通用信息头,请求头,实体头) – 请求报文主体(只有POST才有报文主体),如下图 image.png image.png

2. HTTP响应(Response)报文

报文格式为:状态行 – HTTP头(通用信息头,响应头,实体头) – 响应报文主体,如下图 image.png

image.png

注:通用信息头指的是请求和响应报文都支持的头域,分别为Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via;实体头则是实体信息的实体头域,分别为Allow、Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、Etag、Expires、Last-Modified、extension-header。这里只是为了方便理解,将通用信息头,响应头/请求头,实体头都归为了HTTP头。

二、缓存过程分析

第一次发起请求

image.png

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

这里我们根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分,分别是强制缓存和协商缓存。

三、强制缓存

强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程

3.1. Pragma  

Pragma是HTTP/1.1之前版本遗留的通用首部字段,仅作为于HTTP/1.0的向后兼容而使用。虽然它是一个通用首部,但是它在响应报文中时的行为没有规范,依赖于浏览器的实现。RFC中该字段只有no-cache一个可选值,会通知浏览器不直接使用缓存,要求向服务器发请求校验新鲜度。因为它优先级最高,当存在时一定不会命中强缓存。

3.2. Cache-Control    

Cache-Control是一个通用首部字段,也是HTTP/1.1控制浏览器缓存的主流字段。和浏览器缓存相关的是如下几个响应指令:

指令参数说明
private表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)
public可省略表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存
no-cache可省略缓存前必需确认其有效性
no-store不缓存请求或响应的任何内容
max-age=[s]必需响应的最大值,但是是秒
  • private 响应只作为私有的缓存,不能被CDN等缓存。如果要求HTTP认证,响应会自动设置为private

  • public 表明响应可以被浏览器、CDN等等缓存。

  • no-cache 表示请求必须先与服务器确认缓存的有效性,如果有效才能使用缓存(协商缓存),无论是响应报文首部还是请求报文首部出现这个字段均一定不会命中强缓存。Chrome硬性重新加载(Command+shift+R)会在请求的首部加上Pragma:no-cacheCache-Control:no-cache

  • no-store 表示禁止浏览器以及所有中间缓存存储任何版本的返回响应,一定不会出现强缓存和协商缓存,适合个人隐私数据或者经济类数据。

  • Expires        Expires是一个响应首部字段,它指定了一个日期/时间,在这个时间/日期之前,HTTP缓存被认为是有效的。无效的日期比如0,表示这个资源已经过期了。如果同时设置了Cache-Control响应首部字段的max-age,则Expires会被忽略。它也是HTTP/1.1之前版本遗留的通用首部字段,仅作为于HTTP/1.0的向后兼容而使用。

强制缓存的情况主要有三种(暂不分析协商缓存过程),如下:

1. 不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求(跟第一次发起请求一致),如下图:

image.png

2. 存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存(暂不分析),如下图:

image.png

3. 存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果,如下图:

image.png

四、协商缓存

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程

  • 协商缓存生效,返回304,如下 image.png
  • 协商缓存失效,返回200和请求结果结果,如下 image.png

1. Last-Modified/If-Modified-Since

If-Modified-Since是一个请求首部字段,并且只能用在GET或者HEAD请求中。Last-Modified是一个响应首部字段,包含服务器认定的资源作出修改的日期及时间。当带着If-Modified-Since头访问服务器请求资源时,服务器会检查Last-Modified,如果Last-Modified的时间早于或等于If-Modified-Since则会返回一个不带主体的304响应,否则将重新返回资源。

If-Modified-Since: , :: GMT Last-Modified: , :: GMT

image.png

2. ETag/If-None-Match     

ETag是一个响应首部字段,它是根据实体内容生成的一段hash字符串,标识资源的状态,由服务端产生。If-None-Match是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段,值为之前服务器端返回的资源上的ETag,则当且仅当服务器上没有任何资源的ETag属性值与这个首部中列出的时候,服务器才会返回带有所请求资源实体的200响应,否则服务器会返回不带实体的304响应。ETag优先级比Last-Modified高,同时存在时会以ETag为准。

If-None-Match: <etag_value> If-None-Match: <etag_value>, <etag_value>, … If-None-Match: *

image.png

总结

1. 流程

image.png

2. 协商缓存、强缓存

image.png

3. catch-contral

image.png

demo链接

github.com/songpengyua…

参考文章:

  1. 【第1250期】彻底理解浏览器的缓存机制
  2. 面试精选之http缓存
  3. 浏览器HTTP缓存机制
  4. 前端也要懂Http缓存机制