前言

目前浏览器的缓存类型众多，HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等，这些缓存是如何产生的？命中优先级是怎么样？又该如何去使用它们？

Disk Cache、Memory Cache

Disk Cache、Memory Cache 属于强缓存，将缓存的响应写到内存或硬盘中，也属于 HTTP 缓存的产物。

强缓存的产生依赖于请求响应中的 cache-control 和 expires 的 headers 字段。这两个字段都是用来设置缓存数据的有效时间。

cache-control 字段的值，也需要搭配相应的字段来使用，常用字段：

两个字段同时存在时，cache-control 优先级最高。

当请求响应符合强缓存时，浏览器会根据 header 头中的字段类型进行缓存处理。通常：

此行为属于浏览器行为，服务器不可控。

	区别
Disk Cache	- 长期存在：浏览器关闭时同样存在。 - 存储文件空间更大。
Memory Cache	- 短期存在：生命周期为会话级的，回话结束缓存清除。 - 访问速度更快。 - 优先级更高。

这里主要说的是返回状态码为 304 的这种协商缓存。

当强缓存失效后，浏览器就会携带缓存标志向服务器发送请求。这里主要用到的 header 头：

当收到请求的响应时，会携带：

当发送请求的时候，浏览器会携带：

服务器根据这两个值进行匹配，如果相等，说明文件没有变化，返回 304，浏览器直接从缓存里面取；当不相等时，服务器发送最新的内容，状态码为 200。

ServiceWorker Cache 属于新的 PWA Cache Storage API，它有力度更细的程序可操作缓存的能力。

它的命中条件依赖于 fetch，所以它的命中顺序如下：

是否从 serviceworker Cache 里面取缓存，完全依赖于 serviceworker 的脚本控制，取决于用户自定义。

	强缓存	serviceworker 缓存	协商缓存	缓存 headers 变动
刷新按钮或 `cmd + r`	有效	有效	有效	无变动
`cmd + shift + r`	无效	无效	无效	请求中无 `If-None-Match/If-Modified-Since`，Cache-Control 值为 `no-cache`。
DevTools Network面板开启`Disable cache`	无效	无效	无效	同上，但无缓存的能力更强