从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。

  • Service Worker
  • Memory Cache
  • Disk Cache
  • Push Cache

Service Worker

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

Memory Cache

Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

Disk Cache

Disk Cache 胜在容量和存储时效性上，针对容量大，读取速度慢，但是时效长的资源。此类资源是从磁盘当中取出的，此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache。

相比于内存缓存，硬盘缓存会根据HTTP头部中的字段判断哪些资源需要缓存，哪些可以直接使用或者需要重新请求。

Push Cache

Push Cache 是 HTTP/2 中的内容，是HTTP2 在 server push 阶段存在的缓存，当以上三种缓存都没有命中时，它才会被使用，优先级最低，但是是一种趋势。同时，其缓存时间也很短，只针在统一会话（Session）中存在，一旦会话结束就被释放。其具有以下特点：

  • 所有的资源都能被推送，可以推送 no-cache 和 no-store 的资源
  • 时间较短，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令，连接一旦被关闭，就会被释放
  • 多页面可以使用相同的HTTP/2连接，也就是可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。
  • Push Cache 中的缓存只能被使用一次
  • 浏览器可以拒绝接受已经存在的资源推送
  • 你可以给其他域名推送资源

::: hljs-center

:::