浏览器缓存

发表于 | 分类于

今天就填一下昨天的坑，先讲一下浏览器缓存的策略

浏览器缓存其实就是HTTP缓存机制，分两种类型：强制缓存和协商缓存，浏览器会先尝试命中强制缓存，如果没有对应缓存标识，那么浏览器会直接向服务器发起请求，而如果浏览器缓存发挥了对应的缓存标识，但没有对应的缓存结果，那么浏览器会根据这个缓存标识，向服务器发起请求进行协商缓存的过程

强制缓存

强制缓存是一种可以直接在浏览器缓存处就解决的缓存策略，如果命中的话是不需要发送多余的请求的，主要分以下三种情况

缓存策略

  1. 不存在缓存标识和缓存结果，强制缓存失效，直接向服务器发起请求

img

  1. 存在缓存标识和缓存结果，但是该结果已经失效，强制缓存失效，则使用协商缓存（下文分析）

img

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

img

缓存字段

强制缓存涉及到的HTTP字段：

Expires (HTTP1.0)

是一个绝对时间，在这个时间之前的请求都会直接命中，而在这个时间之后就认为缓存结果失效了

缺点：绝对时间是浏览器端的时间，如果客户端的时间与服务端的时间有误差的话，这个缓存时间就不够精确了

Cache-Control (HTTP1.1)

取值：

  • public：所有内容都将被缓存（客户端和代理服务器都可缓存）
  • private：所有内容只有客户端可以缓存，Cache-Control的默认取值
  • no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  • max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

Max-age 代表的是一个相对时间，当无法确定客户端时间与服务端时间是否有误差的情况下使用这个字段会比较稳妥

当 Cache-controle 和 expires 同时出现时，会以 Cache-control 字段值为准

强制缓存的存放位置

浏览器缓存的存放位置有两种，一个是内存，一个是硬盘

  • 内存读取速度快，但是存放东西更少
  • 硬盘读取速度慢，但是可以存放更多，更长时限

协商缓存

协商缓存机制

协商缓存是需要跟服务器交换信息才知道是否可以使用缓存

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

（强制缓存失效之后才会尝试协商缓存

协商缓存生效，返回304

img

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

img

协商缓存字段

last-modified / if-modified-since

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

If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到这个请求之后，会把这个 If-Modified-Since 字段值跟 该资源在服务器的最后修改时间 进行对比，若这个修改时间 > If-Modified-Since 字段值，则重新返回新资源，否则返回304，表示缓存没有过期，客户端使用浏览器缓存中的内容

Etag / If-None-Match

Etag：服务器响应请求时，当前资源文件的一个唯一标识(由服务器生成)

If-None-Match：客户端再次发起请求时，携带上次请求返回的Etag值，服务器收到之后吧这个值跟之前生成的Etag值进行对比，如果不同的话返回新资源并携带etag，否则返回304，表示缓存没有过期，客户端使用浏览器缓存中的内容

Etag 优先级高于 last-modified

总结

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

img