HTTP缓存机制

缓存的作用

1. 提高资源加载速度
2. 减少网络请求，提高页面渲染速度

缓存的分类

前端缓存主要包括http缓存，数据缓存

HTTP缓存

常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。
浏览器在每次GET URL时都会先检查URL对应的缓存，除非你指定不使用缓存（强制刷新或者在控制台勾选Disable Cache等）

HTTP缓存流程图

优先级

强缓存

不请求服务器，直接用，返回状态码200

• Pragma
  包括实现特定的指令，它可应用到响应链上的的任何接收方
  no-cache
  指定不缓存响应，即资源不缓存；
  不直接询问浏览器缓存情况，向服务器验证当前资源是否更新，因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
  no-store
  绝对缓存,每次请求都会请求服务端
• Cache-Control
  显示是否可以缓存及其缓存类型
  max-age&s-maxage
  max-age（单位为s）指定设置缓存最大的有效时间，定义的是时间长短。当第一次访问服务器的时候，返回一个max-age，在max-age这段时间内，客户端不会在访问服务器获取该资源。
  s-maxage用于共享缓存（比如CDN）,s-maxage也叫代理缓存，优先级高于max-age
  public&private
  public表示该资源可以被多个用户共享，当没有指定public还是private的时候，默认是public
  private响应只作为私有的缓存，不能在用户间共享，如果要求认证，响应会自动设置为private
  no-cache&no-store
no-cache
  指定不缓存响应，即资源不缓存；
  不直接询问浏览器缓存情况，向服务器验证当前资源是否更新，因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
  no-store
  绝对缓存,每次请求都会请求服务端
• Expires
  响应过期的日期和时间（服务器的绝对时间）
  Expires是一个时间戳，当客户端再次请求资源的时候，会吧客户端的时间与时间戳相比，如果过期了，则会访问服务端的资源，不会访问缓存资源

协商缓存

请求服务器，服务器同意了才用，返回状态码304
当浏览器检测某个资源请求没有强缓存，就会发起一个请求到服务器，验证是否存在协商缓存，如果存在协商缓存就回家返回http状态为304，并且会显示一个not modified的字符串
协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的

• last-Modified
  服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问Last-Modified时间点之后资源是否被修改过。如果没有修改，则返回码为304，使用缓存；如果修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。
• ETag
  ETag就像一个指纹，资源变化都会导致ETag变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的;可以理解为ETag是一个可以与Web资源关联的记号（token）
  If-None-Match的header会将上次返回的ETag发送给服务器，询问该资源的ETag是否有更新，有变动就会发送新的资源回来；如果ETag没有变动，则返回状态码304