当浏览器发起一个请求时,浏览器会检测缓存文件是否存在,如果有缓存的话:

  1. 判断Cache-controlExpries
    通过Cache-control与Expries来判断缓存是否过期。
  2. 判断Etag
    通过If-None-Match报头来验证Etag,如果为true,服务器将会发送”304 Not Modified”的响应来告诉浏览器缓存并没有过期,可以继续使用缓存至Cache-control或Expries设置的时间。
  3. 判断Last-Modified
    在浏览器第一次请求某个资源的时候会有一个Last-Modified属性标记此文件在服务器端最后被修改的时间,当第二次发送请求的时候浏览器会向服务器发送If-Modified-Since报头询问第一次请求后该文件是否被修改过,如果没有则返回304,使用本地缓存。

但是如果我们需要更新或者废弃缓存该怎么办呢,毕竟这样的场景有很多:有一个缓存时间为3小时的css文件,但是有突然的样式更改需求需要在1小时内上线并看到效果。
这时,通常的做法,我们通过在资源内容改变时改变资源内容的地址来强制的让用户下载新版资源,比如在文件名中嵌入hash或者版本号,形如index.a1b2c3d.css。