浏览器缓存

基本的原理就是：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

按位置分类

Server worker

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

Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。.

当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。

Memory Cache

Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。Memory Cache 机制保证了一个页面中如果有两个相同的请求。

Disk Cache

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

Push Cache

Push Cache 翻译成中文叫做“推送缓存”，是属于 HTTP/2 中新增的内容。这里推荐阅读 Jake Archibald 的 HTTP/2 push is tougher than I thought 这篇文章。

• Push Cache 中的缓存只能被使用一次

• 浏览器可以拒绝接受已经存在的资源推送

按缓存类型分类

强制缓存与协商缓存都属于Disk Cache或者叫HTTP Cache。

强制缓存

在流程上，强制缓存先访问缓存数据库查看缓存是否存在并且可用，可用直接返回不在发起请求，不存在或者不可用发起请求获取新的资源并缓存。强制缓存会直接减少请求数，是提升最大的缓存策略。如果考虑使用缓存来优化网页性能的话，强制缓存应该是首先被考虑的。

Expires是 HTTP 1.0 的响应字段，表示缓存到期时间，是一个绝对的时间 (当前时间+缓存时间)，如：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

但是，这个字段设置时有两个缺点：

• 由于是绝对时间且是否过期是与客户端本地的时间对比，用户将时间修改，时差或者误差等因素也可能造成客户端与服务端的时间不一致，致使缓存失效。
• 写法太复杂了。表示时间的字符串多个空格，少个字母，都会导致变为非法属性从而设置失效。
  在 HTTP/1.1 中，增加了一个字段 Cache-control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求。这两者的区别就是前者是绝对时间，而后者是相对时间。如下：

Cache-control: max-age=2592000

下面列举一些 Cache-control 字段常用的值：(完整的列表可以查看 MDN)

• max-age：即最大有效时间，在上面的例子中我们可以看到
• must-revalidate：如果超过了 max-age 的时间，浏览器必须向服务器发送请求，验证资源是否还有效。
• no-cache：虽然字面意思是“不要缓存”，但实际上还是要求客户端缓存内容的，只是是否使用这个内容由后续的协商缓存来决定。
• no-store：真正意义上的“不要缓存”。所有内容都不走缓存，包括强制缓存和协商缓存。
• public：所有的内容都可以被缓存（包括客户端和代理服务器， 如 CDN ）
• private：所有的内容只有客户端才可以缓存，代理服务器不能缓存。默认值。

协商缓存

强制缓存与协商缓存可以共有，强制缓存失效后需要使用协商缓存。流程上，浏览器从缓存中获取缓存标识，携带缓存标识访问服务器。服务器对比确定资源是否有更新，没更新返回304无响应内容，浏览器使用缓存。有更新返回200与资源，浏览器存储并使用新的缓存标识与资源。协商缓存提升较小，体现在减少响应内容以提升网络请求时间。

在Http1.1以前，缓存标识为最后一次修改时间（绝对值）。对应一组字段————Last-Modified(响应字段) & If-Modified-Since(请求字段)。但是他还是有一定缺陷的：

• 因为它的时间单位最低是秒，如果某个文件在 1 秒内改变了多次，那么他是无法反映更新的。
• 如果文件是通过服务器动态生成的，那么更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。

为了解决以上问题， HTTP/1.1 出现了一组新的字段 ETag 和 If-None-Match。Etag 存储的是文件的特殊标识（一般都是一个 Hash 值）。流程不变，这组新字段的校验优先级高于旧的字段。