浏览器篇---缓存

- 浏览器的缓存机制

• 本篇文章是根据神三元大佬整理的，不为商业，只为自己学习！

• 原文章连接

• https://juejin.im/post/5df5bcea6fb9a016091def69#heading-24

• 1.强缓存
  检查强缓存。
  1.1 http 1.0 使用Expires字段，值为一个具体的过期时间，但是由于服务器和浏览器时间不一样，可能有误差，故废弃。
  1.2 http 1.1 使用cache-control 字段，
  可选的value
  public：公开的，中间代理服务器和浏览器都可以进行缓存
  private： 私密的，只有浏览器可以缓存，中间代理服务器不可以进行缓存
  no-cache：不缓存，即不进行当前的强缓存，直接进入协商缓存阶段
  no-store: 不进行任何形式的缓存，简单粗暴
  max-age: 过期时长，是一段时间，而不是一个具体的时间节点
  s-maxage： 服务器端的缓存时间
  假设，cache-control 和 expires同时存在的时候，cache-control优先

  2.协商缓存
  如果强缓存失效了，就会进行协商缓存
  协商缓存的tag：last-modified 和 ETag
  2.1 last-modified
  字段怎么来的？
  浏览器第一次往服务器发送请求时，服务器会在响应头上携带上这个字段。
  怎么使用？
  浏览器之后再次请求服务器，会在请求头上携带 if-modified-since字段，值为last-modified字段的值
  服务器会将浏览器传过来的数据与服务器中这个资源的最后修改时间相比较，
  如果请求头上的时间小于服务器中的时间，就会更新资源，进行常规的http请求
  否则直接返回304，使用缓存
  2.2 Etag
  Etag如何来？
  服务器根据当前文件的内容，给文件生成的唯一标识，只要文件内容改变，这个值就会变，服务器通过响应头把这个值传给浏览器
  如何使用？
  浏览器收到etag，会在下次请求时，在请求头上通过if-none-match字段带上这个数据，发到服务器
  服务器用两者进行比较，不同，更新资源，发送http请求，
  相同，发送304，用缓存
  3.缓存位置
  service worker 离线缓存
  memory cache 内存缓存
  disk cache 磁盘缓存
  push cache 推送缓存