浏览器缓存机制

发表于 | 分类于 | 评论数： | 阅读次数：

浏览器与服务器通信的方式为应答模式,即浏览器发起请求,服务端响应请求,那么浏览器第一次发起请求后拿到请求结果, 会根据响应报文中http头的缓存标识决定是否缓存结果.

img

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

强制缓存

向浏览器缓存查找结果,并根据该结果的缓存规则来决定是否使用缓存结果

不考虑协商缓存的情况下,存在以下三种情形:

  • 不存在强制缓存结果以及缓存标识,强制缓存失败,此时直接向服务器发起请求,与第一次向服务器发起请求相同

    img

  • 存在强制缓存,但是已失效,则使用协商缓存

img

  • 存在该缓存且未失效,则强制缓存生效,直接返回该结果.

img

强制缓存的规则

控制强制缓存的字段为:

  • Expires
  • Cache-Control

Expires

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

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

到了HTTP/1.1，Expires已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存直接失效，那么强制缓存存在的意义就毫无意义。

Cache-Control

取值:

  • public:所有内容都被缓存
  • private:所有内容只有客户端可以缓存
  • no-cache:客户端缓存内容,但是是否使用缓存需要经过协商缓存来验证决定
  • no-store:所有内容都不会被缓存,不使用强制缓存/协商缓存
  • max-age=xxx 缓存内容将在xxx秒后失效

由于Cache-Control的优先级比expires，那么直接根据Cache-Control的值进行缓存，意思就是说在600秒内再次发起该请求，则会直接使用缓存结果，强制缓存生效。

注：在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效

如何判断强制缓存已生效?

如下图,状态码为灰色的200且size为 memory cache/disk cache

img

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

协商缓存

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

  • 协商缓存生效

    img

  • 协商缓存失败,返回200和请求结果

img

协商缓存字段

  • Etag/If-None-Match
  • Last-Modified/If-Modified-Since

Last-modified/If-Modified-Since

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

Etag/If-None-Match

  • Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)
  • If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200

总结

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

img

thank u !