HTTP缓存（🦒重要）

• 获取过的资源没必要再去请求获取一次，就是缓存。
• 为什么需要缓存？
  网络请求相比于CPU的加载和页面渲染（毫秒级），是很慢的。我们需要通过缓存把网络请求数量和体积减少，而且网络请求不稳定（信号不好情况下），加剧了页面加载的不稳定性。我们需要优化网络请求让页面加载更快。
• 哪些资源可以被缓存？
  静态资源如JS、CSS、img（回顾一下webpack根据文件内容加contenthash哈希，变or不变）。 HTML资源不可以被缓存，HTML可能随时被开发人员更新。

1. 强制缓存
Cache-Control: 客户端初次请求，服务端认为该资源可以被缓存就在返回资源的时候加上这个头部。在Response Header中。

缓存过期了，请求会再次经过服务器。

- cache-control的值
max-age: 缓存最大过期时间。（秒级别）
no-cahce: 不用服务端本地缓存。正常向服务端请求。
no-store（不常见）不用本地缓存也不用服务端别的缓存方式。就是任性地啥也不要给我缓存！
private: 由最终用户缓存（电脑 手机）
public：中间路由或者代理作缓存。

- 关于Expires

2. 协商缓存（对比缓存）

• 是服务端缓存策略（服务端来判断，不是缓存在服务端）
• 服务端判断客户端资源是否和服务端资源一样
• 一致就返回304，否则返回200以及最新的资源
  
  - 资源标识
  
• Last-Modified
  资源最后修改时间。
  
  If-Modified-Since是个key，它的值就是最近一次服务端传过来的Last-Modified!
• Etag
  根据内容判断。
  
  示例：
  
  
  两者共存，Etag的优先级更高
  
  总结：👇❗👌
  
  

3. 刷新操作对缓存的影响

• 正常操作：地址栏输入url，跳转链接，前进后退等。
  强制缓存有效，协商缓存有效。
• 手动刷新：F5，点击刷新按钮，右击菜单刷新。
  强制缓存失效，协商缓存有效。
• 强制刷新：ctrl + F5
  强制缓存失效，协商缓存失效。