强缓存和协商缓存区别和过程

0、缓存查找的顺序

• Service Worker
  Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。
• 内存缓存
• 磁盘缓存
• 推送缓存
  Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

当以上四种缓存都失效的时候，才会去发送请求，请求时，又根据请求头信息，可分为强缓存、协商缓存。

1、强缓存（本地缓存）

1.1. 概念

不用跟服务器进行通信，直接使用本地缓存的资源，

1.2. 相关header字段

• expires ------ HTTP1.0使用的expires
  一个未来时间，代表资源的有效期，没有过期之前都使用当前资源。

• cache-control------HTTP1.1及其之后使用cache-control
max-age: 当值设为max-age=300时，则代表在这个请求正确返回时间(浏览器也会记录下来)的5分钟内再次加载资源，就会命中强缓存。
  no-cache：不使用本地缓存。向浏览器发送新鲜度校验请求
  no-store：禁止浏览器缓存数据，也禁止保存至临时文件中，每次都重新请求，
  pubilc：任何情况下都缓存（即使是HTTP认证的资源）
  private：只能被终端用户的浏览器缓存，不允许CDN等中间层缓存服务器对其进行缓存。

F5 刷新后无效，Ctrl + F5 强制刷新后无效
如何重新加载缓存过的资源?----------更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源

2、协商缓存

2.1、概念

首先，将所缓存资源的信息发送给服务器，
其次，让服务器判断资源是否已经更新了,

• 若已更新，则返回更新后的资源；
• 若没有更新，则返回304状态，告诉浏览器可直接使用本地缓存的资源，

整个过程至少与服务器通信一次

2.2、相关header字段

• 响应头： Last-Modified
请求头： If-Modified-Since ( 资源修改的时间 )

  1. 浏览器第一次发请求，服务器在返回的 respone 的 header 加上 Last-Modified，
  表示资源的最后修改时间
  
  2. 再次请求资源，在 requset 的 header 加上 If-Modified-Since ，
     值就是上一次请求返回的 Last-Modified 值
  
  3. 服务器根据请求传过来的值判断资源是否有变化，没有则返回 304，
     有变化就正常返回资源内容，更新 Last-Modified 的值
  
  4. 304 从缓存加载资源，否则直接从服务器加载资源
  

• 响应头：Etag
请求头：If-None-Match（标识符字符串）

  一个标识符字符串，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样。

2.3、Last-Modified 与 Etag 的对比：

• 如果我们打开文件但并没有修改其内容，Last-Modified 也会改变，而Etag则不会改变。
• Last-Modified 的时间单位为秒，如果一秒内对文件进行了多次修改，那么由于其时间单位是秒，所以Last-Modified不会改变，最终浏览器还是会去读取缓存资源，而此时缓存的资源已经过时了。
• Etag的优先级高于Last-Modified。

2.4、为什么协商缓存有两个属性一起出现

协商缓存是浏览器判断资源是否可用，所以需要两个标识，

第一个是第一次请求的响应头带上某个字段（Last-Modified或者Etag），

第二个则是后续请求带上的对应请求字段（If-Modified-Since或者If-None-Match），

两个标识一起出现才有意义，单独则没有什么效果。

3、浏览器缓存过程（强缓存转协商缓存的过程）

• 1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把文件、文件的返回时间、response header一并缓存；

• 2.下一次加载资源时，查看cache-control的设置

  • 如果值是no-cache，则表示不缓存，则直接去请求数据；
  • 如果值是max-age，则比较当前时间和上一次返回200时的时间差是否大于max-age，若小于max-age，则表示没有过期，命中强缓存，不发请求直接从本地缓存读取该文件；如果时间差大于max-age，则表示资源过期了，则向服务器发送请求，并且header中携带有If-None-Match、If-Modified-Since、Etag值等

• 3.如果服务器收到的请求头中，有Etag值，优先根据Etag的值判断被请求的文件有没有做修改，
  如果Etag值一致则没有修改，命中协商缓存，返回304，则读取缓存资源；
  如果Etag值不一致则有改动，则直接返回新的资源，并带上新的Etag值；

• 4.如果服务器收到的请求头中，没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，
  如果一致则没有修改，命中协商缓存，返回304；
  如果不一致则有修改，则返回新的文件和并在响应头中携带last-modified ，下次请求时通过If-Modified-Since携带上last-modified的值；
  

作者：肆意木
链接：https://www.jianshu.com/p/f6525b0f8813
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。