浏览器缓存概览

[GeniusFunny]

浏览器缓存

当我们谈到浏览器缓存的时候，总是会提到强缓存/协商缓存，但是事实上，浏览器（Chrome）的缓存不止于此。浏览器（以Chrome为例）的缓存分为四种：**Service Worker Cache、Memory Cache、Disk Cache、Push Cache。**而我们所说的强缓存/协商缓存，只是Disk Cache（也叫HTTP Cache)。

接下来，按优先级递减的顺序一一简单介绍这四种类型的Cache。

Service Worker Cache

Service Worker Cache不同于Memory Cache和Disk Cache，它是由我们自己来管控，并且这个缓存是永久性的，必须我们手动删除或者浏览器清空cache storage。

如果 Service Worker 没能命中缓存，一般情况会使用 fetch() 方法继续获取资源。这时候，浏览器就去 memory cache 或者 disk cache 进行下一次找缓存的工作了。

Memory Cache

Memory Cache，存储在内存中。几乎所有的资源都会自动放在内存中，但是由于内存大小有限制，所以只能存放一定数量的数据，并且浏览器一旦关闭Tab，存储在内存中的数据就会丢失。

preloader：边解析js/css，边获取js/css

preload：显式指定的预加载资源，也会被放入 memory cache 中。

cache：no store，只有这样设置才会让资源不被短期缓存，其余的方式都会存在短期缓存效果（毕竟资源还在内存里嘛）

Disk Cache

也就是HTTP Cache，这个可以简单介绍。

强缓存：

1. Cache-Control：max-age=xxx；
2. Expire：绝对时间

协商缓存：

1. Last-Modified & If-Modified-Since
2. Etag & If-None-Match
3. Etag 优先于 Last-Modified

Push Cache

HTTP/2 中的 Server Push 技术使得服务端收到页面请求后，能够将页面所需资源（CSS、JS）通过 PUSH_PROMISE 帧推送给浏览器，从而减少延迟；如果要推送的资源浏览器本地已经有了缓存，会导致流量的浪费。

HTTP/2的服务端推送，推送的资源直接进入客户端缓存

最佳实践

1. 不变的内容：max-age=超大的数字
2. 变化的内容：Cache-Control：no-cache（no-cache不是不缓存，只是用的时候会向服务端验证有效性）

参考资料

1. Caching best practices & max-age gotchas
2. A Tale of Four Caches