浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下：
- Memory Cache
- Service Worker Cache
- HTTP Cache
- 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
分为强缓存和协商缓存。优先级较高的是强缓存
强缓存
- 强缓存是利用 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 的补充和强化存在.因为
- 我们编辑了文件，但文件的内容没有改变。服务端并不清楚我们是否真正改变了文件，它仍然通过最后编辑时间进行判断。因此这个资源在再次被请求时，会被当做新资源，进而引发一次完整的响应——不该重新请求的时候，也会重新请求。
- 当我们修改文件的速度过快时（比如花了 100ms 完成了改动），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，所以它是感知不到这个改动的——该重新请求的时候，反而没有重新请求了。
- Etag 的生成过程需要服务器额外付出开销，会影响服务端的性能。
Etag 的优先级要高于 Last-Modified
CDN 缓存
全称 即内容分发网络
可以理解成一个离和你距离很近的、方便从上面获取完整的原始数据的服务器，为保证用户可以从上面获取到最新的内容，它会定期和拥有原始内容的服务器进行同步更新。
这样就可以以更快的速度和更好的连接质量来获取内容。其次，CDN增强了整体的带宽，原本一台服务器变成多台拥有相同内容的服务器，用户被分散到不同的服务器上面去进行下载，平均每个用户能够分到的带宽就会得到明显的提高。同时也可以缓存资源，提升访问速度。
网友评论