玩转浏览器缓存机制

基本知识准备:

浏览器的缓存机制也就是我们常说的HTTP缓存机制,是根据HTTP报文的缓存标识对资源进行缓存的一种浏览器机制。能够有效的减轻服务器压力和减少带宽使用。

在分析浏览器缓存机制之前,我们先用图文简单介绍一下HTTP报文(这里以w3shcool为例)
HTTP报文分为两种:

1.HTTP请求(Request)报文,报文格式为:

请求行 + HTTP头(通用信息头,请求头,实体头) + 请求报文主体(只有POST才有报文主体),如下图:
HTTP请求(Request)报文

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

!注意:
1.通用信息头指的是请求和响应报文都支持的头域,分别为Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via

2.实体头则是实体信息的实体头域,分别为:
Allow、Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、Etag、Expires、Last-Modified、extension-header

3.这里只是为了方便理解,将通用信息头,响应头/请求头,实体头都归为了HTTP头

缓存过程分析:

浏览器与服务器通信的方式为应答模式:
浏览器发起HTTP请求 – 服务器响应该请求。
浏览器在第一次向服务器发起请求后,在响应报文中拿到请求结果和HTTP头的缓存标识,根据此标识来决定是否进行浏览器缓存。

若是则将请求结果和缓存标识存入浏览器缓存中,简单的过程如下图:
缓存模型1
由上图我们可以知道:

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

以上两点结论就是浏览器缓存机制的关键,他确保了每个请求的缓存存入与读取。

缓存方法:

通常来说,我们根据是否需要向服务器重新发起HTTP请求将缓存过程分成两个部分,分别是强制缓存协商缓存

1.强制缓存:

强制缓存就是向浏览器缓存查找该请求缓存的结果,并根据浏览器缓存返回结果的缓存规则来决定是否使用该浏览器缓存的过程,强制缓存的情况主要有三种(下文分析协商缓存过程),如下:

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

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

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

那么强制缓存的缓存规则是什么?

当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是ExpiresCache-Control,其中Cache-Control的优先级>Expires的优先级

Expires

Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求结果缓存的到期时间,即再次发起该请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。

Expires是HTTP/1.0的字段,但是现在浏览器默认使用的是HTTP/1.1,那么在HTTP/1.1中网页缓存还是否由Expires控制?

到了HTTP/1.1,Expire已经被Cache-Control替代,原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,那么如果客户端与服务端的时间因为某些原因(例如时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存则会直接失效,这样的话强制缓存的存在则毫无意义,那么Cache-Control又是如何控制的呢?

Cache-Control

在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:
* public:所有内容都将被缓存(客户端和代理服务器都可缓存)

* private:所有内容只有客户端可以缓存,Cache-Control的默认取值

* no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定

* no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存

* max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效

接下来,我们看一个例子,如下图:
Cache-Control
由上面的例子我们可以知道:

* HTTP响应报文中expires的时间值,是一个绝对值

* HTTP响应报文中Cache-Control为max-age=600(单位为秒),是相对值

由于Cache-Control的优先级比Expires高,那么直接根据Cache-Control的值进行缓存,意思就是说在600秒内再次发起该请求,则会直接使用缓存结果,强制缓存生效。
!!注意:在无法确定客户端的时间是否与服务端的时间同步的情况下,Cache-Control相比于expires是更好的选择,所以Cache-Control和Expires同时存在时,只有Cache-Control生效。

了解强制缓存的过程后,我们拓展性的思考一下:

浏览器的缓存存放在哪里,如何在浏览器中判断强制缓存是否生效?
缓存位置

这里我们以博客的请求为例,状态码为灰色的请求则代表使用了强制缓存,请求对应的Size值则代表该缓存存放的位置,分别为from memory cache 和 from disk cache。

那么from memory cache 和 from disk cache又分别代表的是什么呢?什么时候会使用from disk cache,什么时候会使用from memory cache呢?

这里我们需要了解内存缓存(from memory cache)和硬盘缓存(from disk cache),如下:
1.内存缓存(from memory cache):内存缓存具有两个特点,分别是快速读取和时效性:
快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。
时效性:一旦该进程关闭,则该进程的内存则会清空。

2.硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

注:from memory cache代表使用内存中的缓存,from disk cache则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为memory cache –> disk cache

在浏览器中:
1.浏览器会在js和图片等文件解析执行后直接存入内存缓存中,当我们刷新页面时浏览器只需直接从内存缓存中读取(from memory cache)文件;
2.css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

2.协商缓存:

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:

① 协商缓存生效,返回304,如下图:
协商缓存304

② 协商缓存失效,返回200和请求结果结果,如下图:
协商缓存200

同样,协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的,控制协商缓存的字段分别有:Last-Modified / If-Modified-Since</font face=”宋体” color=#91b859>和Etag / If-None-Match

!!注意:Etag/If-None-Match的优先级比Last-Modified/If-Modified-Since高。同时存在则只有Etag / If-None-Match生效。

Last-Modified / If-Modified-Since

Last-Modified
Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间,如下图:
Last-Modified

If-Modified-Since
If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求后,发现该请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;若小于则返回状态码304,代表此资源在服务器中无更新,可继续使用浏览器缓存的缓存文件,如下图:
If-Modified-Since

Etag / If-None-Match

Etag
Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),如下图:
Etag

If-None-Match
If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用浏览器缓存文件;不一致则重新返回资源文件,状态码为200,如下图:
Etag-match

总结

强制缓存优先于协商缓存进行,
若强制缓存(Expires和Cache-Control)生效则直接使用缓存,
若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),
协商缓存由服务器决定是否使用缓存,
若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;
若生效则返回304,继续使用缓存。

主要过程如下图:
all-flow

如有错误请不吝指正!
2019年8月26日重新编辑 in Beijing!

文章作者: fxgao
文章链接: http://www.fxflying.com/2019/08/26/storage/
版权声明: 转载请注明来自 fxgao!'
打赏
  • 微信
  • 微信pay
  • 支付宝pay

评论