缓存类型

浏览器缓存分为强缓存和协商缓存:
1 强缓存:浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
2 协商缓存:当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回(304),但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;若未命中请求,则将资源返回客户端,并更新本地缓存数据(200)。

强缓存与协商缓存区别:强缓存不发请求到服务器,协商缓存会发请求到服务器。

浏览器缓存分为:强缓存和协商缓存。

1、强缓存:

浏览器加载资源时,第一步先判断它是否是强缓存,如果是,浏览器将直接从自己的缓存中读取,不会向服务器发送请求。Alt text上图,status200,Size是from memory cache就是走的强缓存。那么什么是强缓存呢?浏览器又是咋判断的呢?

Expires字段:

1、浏览器第一次向服务器请求,服务器返回资源并在response header加上Expires字段,是客户端缓存有效期,是绝对时间。2、浏览器接收资源,把资源和相应头缓存起来。3、待到再次请求这个资源时,先在缓存中找,找到了看Expires字段,判断是否过期。若没过期直接从缓存加载。若过期了,再向服务器请求。

但是绝对时间有时会有偏差,所以引出了Cache-Control。

Cache-Control字段:

1、浏览器第一次向服务器请求,服务器返回资源并在response header加上Cache-Control字段,也是缓存的有效期,但是是相对时间,比如:Cache-Control:max-age=56700000。2、浏览器接收资源,把资源和相应头缓存下来。3、待到浏览器再次请求这个资源时,先在缓存找,根据第一次的请求时间和Cache-Control相对时间算出过期时间。若没过期,直接从缓存加载。若过期了,再向服务器请求。

Cache-Control弥补了Expires的不足,更安全有效。

2、协商缓存:

当浏览器判断不是强缓存,就会发向服务器发请求,判断是否是协商缓存。如果是,服务器会返回304Not Modified,浏览器从缓存中加载。那什么又是协商缓存呢?

Last-Modified和If-Modified-Since字段:

1、浏览器第一次向服务器发请求,服务器返回资源并在response header加上Last-Modified字段,表示资源最后修改的时间。2、浏览器再次请求这个资源时,请求头会加上If-Modified-Since字段。若这两个字段一样,说明资源没有修改过,返回304Not Modified,浏览器从缓存中获取资源。若这两个字段不一样,说明资源修改过,服务器正常返回资源。

但有时候服务器上资源有变化,单最后修改时间没更新,则引出下面两个字段。

ETag、If-None-Match:

1、浏览器第一次向服务器请求,服务器返回资源并在response header上加ETag字段。表示资源本身,资源有变化,则该字段有变化。2、浏览器再次向服务器请求这个资源时,请求头携带If-None-Match字段。若这两个字段相同,则代表资源没有变化,服务器返回304Not Modified,浏览器从缓存中加载。若两个字段不同,证明资源有变动,服务器正常返回资源。