这个机制还可以再了解

一，导言

缓存可以说是优化性能优化的简单而有效的方法。优秀的缓存策略可以减少网页请求资源的距离，减少延迟，并减少带宽和网络负载，因为缓存文件可以重复使用。

对于数据请求，它可以分为三个步骤：启动网络请求，后端处理和浏览器响应。浏览器缓存有助于我们在第一步和第三步中优化性能。例如，如果直接使用缓存而不启动请求，或者如果启动请求但存储在后端的数据与前端一致，则无需返回数据，这会减少响应数据。

在下面的内容中，我们将通过缓存位置，缓存策略和实际场景应用程序缓存策略来探索浏览器缓存机制。

二，缓存位置

缓存位置有四种类型，每种类型都有优先级。当依次搜索缓存而没有命中时，请求网络。

1.服务工作者

Service Worker是在浏览器后面运行的独立线程，通常可用于实现缓存。对于Service Worker，传输协议必须是HTTPS。由于请求网站监控拦截涉及Service Worker，因此必须使用HTTPS协议来保护它。 Service Worker的缓存与浏览器的其他内置缓存机制不同。它使我们可以自由地控制缓存哪些文件，如何匹配缓存，如何读取缓存以及缓存是持久的。

服务工作者的缓存功能通常分为三个步骤：首先，您需要先注册服务工作者，然后在收听安装事件后缓存所需的文件。然后，当用户下次访问时，您可以通过拦截请求来查询是否存在缓存。如果有缓存，您可以直接读取缓存文件，否则您将请求数据。

当Service Worker没有访问缓存时，我们需要调用fetch函数来获取数据。也就是说，如果我们不在服务工作者命中中进行缓存，我们将根据缓存查找优先级查找数据。但无论我们是从内存缓存还是从网络请求获取数据，浏览器都会显示我们从服务工作者那里获得的数据。

2.Memory Cache

内存缓存也是内存缓存。它主要包含当前页面中捕获的资源，例如页面上已下载的样式，脚本和图像。读取内存中的数据肯定比磁盘快。虽然内存缓存的读取效率很高，但缓存持久性非常短，并且会在发布进程时释放。关闭Tab页面后，将释放内存缓存。因此，由于内存缓存非常高效，我们可以将数据保存在内存中吗？

这是不可能的。计算机中的内存必须远小于硬盘容量。操作系统需要仔细使用内存，因此我们可以使用更少的内存。

在我们访问页面后，再次刷新页面，我们可以发现大量数据来自内存缓存。

存储器高速缓存中的重要高速缓存资源是预加载器相关指令（例如）下载的资源。众所周知的预加载器相关指令已经是页面优化的常用手段之一。它可以在请求网络上的下一个资源时解析js/css文件。

需要注意的是，内存缓存不关心返回资源的HTTP缓存头Cache-Control的值。资源的匹配不仅仅与URL匹配，还与Content-Type，CORS匹配。检查其他特征。

3.Disk Cache

磁盘缓存也是存储在硬盘中的缓存。读取速度很慢，但所有内容都可以存储在磁盘上，在容量和存储及时性方面优于内存缓存。

在所有浏览器缓存中，磁盘缓存覆盖率基本上是最大的。它将根据HTTP Herder中的字段确定需要缓存哪些资源，哪些资源可以在没有请求的情况下使用，哪些资源已过期且需要重新请求。即使在跨站点的情况下，一旦硬盘缓存了相同地址的资源，它们就不会再次请求数据。大多数缓存来自磁盘缓存，并且HTTP协议头中的缓存字段在下面更详细地描述。

浏览器会将哪些文件存入内存？哪些被扔进硬盘？

在这一点上，互联网上有不同的意见，但以下几点更可靠：

对于大文件，高概率不存储在内存中，反之亦然。

如果当前系统内存使用率很高，则文件优先存储在硬盘中。

4.Push Cache

Push Cache是HTTP/2的内容，当上述三个缓存都没有被命中时，它将被使用。它只存在于会话中，一旦会话结束就会被释放，缓存时间非常短。在Chrome浏览器中只有大约5分钟，并且它没有严格执行HTTP标头中的缓存指令。

Push Cache在中国可以找到的信息量也很小，因为HTTP/2在中国不够流行。以下是对Jake Archibald的HTTP/2推送的评论比我想的文章更难，文章中有几个结论：可以推送和缓存所有资源，但Edge和Safari浏览器支持相对较差

可以推送无缓存和无存储的资源

关闭连接后，将释放推送缓存

多个页面可以使用相同的HTTP/2连接，并且可以使用相同的Push Cache。这主要取决于浏览器的实现。出于性能原因，某些浏览器对同一域名使用相同的HTTP连接，但使用不同的选项卡标签。

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

浏览器可以拒绝接受现有的资源推送

您可以将资源推送到其他域名。

如果上述四个缓存都没有被命中，则只能请求获取资源。

因此，出于性能原因，大多数接口应选择缓存策略。通常，有两种类型的浏览器缓存策略：强缓存和协商缓存，缓存策略通过设置HTTP头实现。

三，缓存过程分析

浏览器与服务器通信的方式是应答模式，即：浏览器发起HTTP请求 - 服务器响应请求，然后浏览器如何确定不应缓存资源，如何缓存它？在浏览器首先将请求发送到服务器并获得请求的结果之后，请求的结果和缓存标识符存储在浏览器缓存中。根据首次请求资源时返回的响应头来确定浏览器的高速缓存处理。

四，强大的缓存

强缓存：不向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中，可以看到请求返回的状态代码为200，而Size显示来自磁盘缓存或来自内存缓存。通过设置两个HTTP标头可以实现强大的缓存：Expires和Cache-Control。

过期

缓存过期时间用于指定资源到期的时间，即服务器端的特定时间点。换句话说，Expires=max-age +请求时间，需要与Last-modified结合使用。 Expires是Web服务器响应头字段，它告诉浏览器在到期时间之前直接从浏览器缓存中获取数据以响应http请求，而不必再次请求它。

2.Cache-控制

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存。例如，当Cache-Control: max-age=300时，它将在请求的正确返回时间的5分钟内再次加载资源（浏览器也会记录它），并且它将命中强缓存。可以在请求头或响应头中设置Cache-Control，并且可以组合各种指令：

无缓存：客户端缓存内容。如果使用缓存，则需要协商它以验证决策。表示Cache-Control的缓存控制方法不用于预身份验证。相反，Etag或Last-Modified字段用于控制缓存。应该注意的是，名称no-cache有点误导。设置no-cache后，并不意味着浏览器不再缓存数据。仅当浏览器使用缓存数据时，您才需要确认数据是否仍与服务器保持一致。

S-maxage（s）：与max-age相同，仅在代理服务器（例如CDN缓存）中有效。例如，当s-maxage=60时，在这60秒内，即使更新了CDN的内容，浏览器也不会发出请求。 Max-age用于正常缓存，而s-maxage用于代理缓存。 S-maxage的优先级高于max-age。如果存在s-maxage，则覆盖max-age和Expires标头。

Max-stale：可以容忍的最大到期时间。 max-stale指令表示客户端愿意接收已过期的响应。如果指定了max-stale的值，则最大容差时间是相应的秒数。如果未指定，则浏览器愿意接收任何年龄响应（年龄表示源站生成或确认响应的时间与当前时间之间的差异）。

事实上，两者之间的差异并不大。区别在于Expires是http1.0的产品，而Cache-Control是http1.1的产品。如果两者都存在，则Cache-Control的优先级高于Expires；在某些情况下，不支持HTTP1。在.1的上下文中，Expires将是有用的。因此，Expires实际上是一种过时的产品。目前，它的存在只是一种兼容性。

强大的缓存，以确定缓存是基于它是否超过特定时间或特定时间段，无论服务器端文件是否已更新，这可能导致加载的文件不是服务器上的最新内容那么我们怎么知道服务器端的内容呢？有没有更新？此时我们需要使用协商缓存策略。

五，协商缓存

协商缓存是强制缓存过期的过程。浏览器携带缓存标识符以发起对服务器的请求。服务器根据缓存标识符确定是否使用缓存。主要有两种情况：Operation timed out after 30001 milliseconds with 0 out of -1 bytes received3.两者比较：

首先，Etag在准确性方面优于Last-Modified。

Last-Modified的时间单位是秒。如果文件在1秒内更改多次，则其Last-Modified不会反映修改，但Etag每次都会更改准确性；如果它是负载均衡的服务器，每个服务器生成的Last-Modified也可能不一致。

其次，就性能而言，Etag不如Last-Modified。毕竟，Last-Modified只需要记录时间，Etag需要服务器通过算法计算哈希值。

第三，优先级，服务器检查优先考虑Etag

六，缓存机制

强制缓存优先于协商缓存。如果强制缓存（Expires和Cache-Control）生效，则直接使用缓存。如果它无效，则协商缓存（Last-Modified/If-Modified-Since和Etag/If-None-Match）。协商缓存由服务器确定是否使用缓存。如果协商缓存失败，则表示请求的缓存无效，返回200，返回资源和缓存标识，然后将其存储在浏览器缓存中；如果有效，则返回304，继续使用缓存。具体流程图