浏览器缓存机制

在web的开发中，合理的利用缓存可以在重复获取一些静态资源时（比如最占用网络的图片）直接从缓存中读取，不用和服务端打交道，优化用户体验，并能够一定程度上降低服务器的压力

缓存可以分为两种：强制缓存和协商缓存

• 强制缓存
  命中强制缓存的过程：
  浏览器请求—–>先获取header信息，判断是否命中强制缓存（根据expires或cache-control），如果命中强制缓存，本次请求不会和服务器打交道，数据直接会从缓存中读取。

  header信息：
  1、expires：这是http1.0的规范，它的值为一个绝对时间的GMT格式的时间字符串

  2、cache-control：这是http1.1时出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值；资源第一次的请求时间和cache-control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行；cache-control除了该字段外，no-cache（使用协商缓存），no-store（禁止浏览器缓存数据，每次请求都会直接从服务器获取），public（可以被所有用户缓存），private（只能被终端用户缓存，不能被CDN等中继缓存服务器缓存）
  cache-control的优先级比expires的优先级高，有cache-control的情况下优先使用

• 协商缓存
  协商缓存命中过程：
  在没有命中强制缓存的前提下（就是说强制缓存的优先级比协商缓存的优先级高），浏览器会携带缓存中的header信息中的Last-Modified/If-Modified-Since和Etag/If-None-Match等字段去请求服务器，询问服务器是否可以使用缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容和header信息，更新缓存

  从协商缓存中读取数据时，http状态码为304

  1、Last-Modified/If-Modified-Since：两个的值都是一个GMT格式的时间，浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间，浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值，服务器收到请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header，浏览器收到304的响应后，就会从缓存中加载资源，如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

  2、Etag/If-None-Match：这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。

参考文章：https://www.cnblogs.com/wonyun/p/5524617.html