http缓存（浏览器缓存）——强缓存、协商缓存

定义：利用浏览器存储机制，将一部分数据保存在客户端，从而减少对服务器的请求降低服务器的压力，提升效率。

为什么需要http缓存：

• 为了减少网络请求的数量和体积，让页面加载更加方便
• 当网络不稳定时，仍可以使用缓存的资源进行展示

浏览器缓存的都是派生资源

开源浏览器引擎的资源可以分为：

• 主资源，比如HTML页面，或者下载项

• 派生资源，分类如下

    Javascript脚本
    CSS样式
    图片
    字体
    ...
    可以说除了主资源之外，剩下的网络资源都是派生资源
  

强缓存

强缓存通过响应头catch-control中的max-age等指令进行控制，max-age可设置强缓存时间周期，在该周期内将直接从客户端缓存获取资源，不会向服务器发送请求

协商缓存

协商缓存通过响应头etag和last-modified进行控制，每次发送请求时，需要进行缓存新鲜度校验。如果缓存过旧，将直接从服务端获取，否则从客户端缓存中获取。
新鲜度校验，通过请求头if-none-match与响应头etag进行对比，或者请求头if-modified-since与响应头last-modified进行对比。

---

静态资源

第一次请求肯定是从服务器请求过来的资源。

如果第一次的响应头中包含可强缓存的相关字段 cache-control ，同时也包含了协商缓存的相关字段 etag 和 last-modified;

当强缓存和协商缓存字段同时存在时会进行以下步骤来请求资源：

强缓存和协商缓存同时存在，如果强缓存还在有效期内则直接使用缓存；如果强缓存不在有效期，协商缓存生效。
即：强缓存优先级 > 协商缓存优先级

强缓存的 expires 和 cache-control 同时存在时， cache-control 会覆盖 expires 的效果， expires 无论有没有过期，都无效。
即：cache-control 优先级 > expires 优先级

协商缓存的 Etag 和 Last-Modified 同时存在时， Etag 会覆盖 Last-Modified的效果。
即：ETag 优先级 > Last-Modified 优先级

第二次请求该资源的时候，就直接是从缓存中读取的。

实际场景中应用缓存的策略

我们对于变动更改频繁的文件，采取协议缓存的处理设置 Cache-Control: no-cache,通过Etag的值来判断当前缓存是否可用
对于基本不常变化的资源，采用强制缓存的处理，设置Cache-Control: max-age=xxx一个比较大的数，让其从客户端缓存中获取

部分来自：https://zhuanlan.zhihu.com/p/258963061