今天比较懒，一图胜万言

自己总结下吧：

缓存位置：

• service-worker（注册，监听，拦截请求，强制https，自由缓存）
• memory-cache（内存中，大小和时间限制较大，关闭tab就消失，但是速度快）
• disk-cache（硬盘中，大小和时间有保障，但是速度稍慢）

强缓存：

• expires字段
  http1.0的产物，相对来说比较落后了，但是也常作为一种兼容性的写法，它规定了资源到期的时间，容易受系统本地时间的影响而命中；
• cache-control
  强缓存中最重要的属性，有多个值可以设定，常用的比如
  • max-age=300，代表接下来的300秒内，再次访问该资源，就会命中强缓存；
  • no-cache，该值表示每次请求都会进行协商缓存，防止服务器资源内容和缓存中的不一致；
  • no-store，完全不缓存，每次都会走服务器。

协商缓存：（headers中last-modified和E-tag）

浏览器带着缓存标识向服务器发送请求，会有两种状态：

• 304命中缓存
• 200正常响应，存入缓存

服务器如何判断资源是否发生变化了呢？

• last-modified和if-modified-since:
  第一次请求时，服务端会在response header中添加 Last-Modified（上次修改该资源的时间），返回给客户端，浏览器将这个resHeader进行缓存，缓存到last-modified记录中，下次请求的时候，会识别到有这个记录，将该记录的上次修改时间带上，传给服务端，服务端再进行判断，文件是否发生变化，从而响应相应的内容。
• E-tag和if-none-match：
  上面的方式有两种弊端：
  1、单位只能以秒计，有误差；
  2、如果文件只是打开，没有修改过，也会识别出不一致，资源浪费。

E-tag相当于获取到了文件的hash值，这跟文件内容就完全同步了，精度来说，优于last-modified，但是效率稍逊。

用户行为影响：

• 输入地址请求页面
  浏览器会查找disk-cache中是否有缓存，没有则发送网络请求；
• 不关闭tab页面，直接刷新
  此时还可以使用memory-cache，优化匹配memory，然后disk
• 当用户强制刷新会发生什么？（ctrl+f5）
  这时所有请求的强缓存都换成了cache-control：no-cache，为了兼容还会带上（pragma: no-cache），返回200和最新内容。

终于放假了，8天假期，有点开心。