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

强缓存（本地缓存）

1. 概念

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

2. 相关header字段

2.1 expires

一个未来时间，代表请求有效期，没有过期之前都使用当前请求。

eg: 
Thu , 15 Apr 2099  20:00:00  GMT  ，代表 2099 年4月16日请求过期，在这之前当前请求都有效。

2.2cache-control,优先级高于 expires。

value 是一个时间段，请求有效的最大时间段，限制：1.需要记住请求时间还需要计算是否在这个时间段内 2. 服务器与客户端时间必须一致。

因为它是一个时间段，所以意味着，可以设置一些默认值，常见的默认值设置： 

no-cache：不使用本地缓存。向浏览器发送新鲜度校验请求

pubilc：任何情况下都缓存（即使是HTTP认证的资源）

private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

no-store：禁止浏览器缓存数据，也禁止保存至临时文件中，每次都重新请求，多次设置 cache-control，优先级最高

3. F5 刷新后无效，Ctrl + F5 强制刷新后无效

强制缓存如何重新加载缓存过的资源？

更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源

---

协商缓存

1. 概念

将资源一些相关信息返回服务器，让服务器判断浏览器是否能直接使用本地缓存，整个过程至少与服务器通信一次

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 从缓存加载资源，否则直接从服务器加载资源

3. Etag/If-None-Match（标识符字符串）

与 Last-Modified/If-Modified-Since 不同的是，返回 304 时，ETag 还是会重新生成返回至浏览器。

4. 优点

有些文件可能会周期性更改，但内容并没有修改时，用 Etag 就不用重新拉取；

1S 内修改的文件也会检测到；

优先级高于 Last-Modified。

5.为什么协商缓存有两个属性一起出现：

协商缓存是浏览器判断资源是否可用，所以需要两个标识，第一个是第一次请求的响应头带上某个字段（Last-Modified或者Etag），第二个则是后续请求带上的对应请求字段（If-Modified-Since或者If-None-Match），两个标识一起出现才有意义，单独则没有什么效果。

6. F5 刷新后依然有效，Ctrl + F5 强制刷新后无效