浏览器缓存机制

浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下：

1. Memory Cache
2. Service Worker Cache
3. HTTP Cache
4. Push Cache

memory cache

memory cache: 内存中的缓存,也是响应速度最快的一种缓存，tab 关闭以后，内存里的数据也将不复存在. Base64 格式的图片,体积不大的 JS、CSS 文件,有较大地被写入内存.
Memory Cache 优先级大于 Disk Cache

disk cache

disk cache 将资源缓存到磁盘中，任何资源都能存储到磁盘中.当保存到内存池中的数据达到一个程度时，便会将数据保存到[硬盘]

Service Worker Cache

Service Worker 可以理解为一个代理服务器。可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等，以及最重要的离线资源缓存功能。它是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体，因此无法直接访问 DOM。

Push Cache

Push Cache 浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情况下才会去询问 Push Cache。
Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放。
不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache

HTTP Cache

分为强缓存和协商缓存。优先级较高的是强缓存

强缓存

1. 强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的
   （1）public：所有内容都将被缓存（客户端和代理服务器都可缓存）
   （2）private：所有内容只有客户端可以缓存，Cache-Control的默认取值
   （3）no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定,
   在浏览器使用缓存前，会往返对比ETag，如果ETag没变，返回304，则使用缓存
   （4）no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
   （5）max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

协商缓存

http response header key	http request headerkey
ETag（服务端返回的当前资源的etag值）	If-None-Match(上一次服务器对于当前资源返回的etag值）
Last-Modified（服务端返回的当前资源的最后修改时间）	If-Modified-Since(上一次服务器对于当前资源返回的最后修改时间）

如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。

ETag 只能作为 Last-Modified 的补充和强化存在.因为

1. 我们编辑了文件，但文件的内容没有改变。服务端并不清楚我们是否真正改变了文件，它仍然通过最后编辑时间进行判断。因此这个资源在再次被请求时，会被当做新资源，进而引发一次完整的响应——不该重新请求的时候，也会重新请求。
2. 当我们修改文件的速度过快时（比如花了 100ms 完成了改动），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，所以它是感知不到这个改动的——该重新请求的时候，反而没有重新请求了。
3. Etag 的生成过程需要服务器额外付出开销，会影响服务端的性能。
   Etag 的优先级要高于 Last-Modified

CDN 缓存

全称 即内容分发网络

可以理解成一个离和你距离很近的、方便从上面获取完整的原始数据的服务器，为保证用户可以从上面获取到最新的内容，它会定期和拥有原始内容的服务器进行同步更新。
这样就可以以更快的速度和更好的连接质量来获取内容。其次，CDN增强了整体的带宽，原本一台服务器变成多台拥有相同内容的服务器，用户被分散到不同的服务器上面去进行下载，平均每个用户能够分到的带宽就会得到明显的提高。同时也可以缓存资源，提升访问速度。