共计 4253 个字符，预计需要花费 11 分钟才能阅读完成。
浏览器缓存的工作流程
通过网络获取内容既速度迟缓又开销微小。较大的响应须要在客户端与服务器之间进行屡次往返通信，这会提早浏览器取得和解决内容的工夫，还会减少访问者的流量费用。因而，缓存并反复利用之前获取的资源的能力成为性能优化的一个要害方面。
这里先看张大家最相熟的 Devtools 网络图：
图中青色、绿色和橙色圈出的局部别离是来自内存 (memory 缓存)、磁盘(disk 缓存) 和 Http 申请拿到的数据 (非缓存)，还有一种返回码 304 的申请也是从缓存(memory/disk) 中获取数据。304 跟 memory/disk 缓存的区别是：在浏览器判断资源曾经过期的状况下会去服务器查问资源是否更新，如果资源没更新则返回 304 码，浏览器收到 304 码就会更新资源的过期工夫并间接从之前 disk/memory 缓存中拿到以后资源，换言之如果资源没过期，那么浏览器就会跳过向服务器校验资源这一步并间接去拿 memory/disk 缓存获取。
大抵流程如下：
- 1）首先查看是否存在 Service Worker Cache，没命中或不存在则进行下一步
- 2）查看内存中是否存在资源，存在的话间接加载(from memory – 200)。
- 3）如果内存没有，择取从硬盘获取，存在且没过期的话间接加载 (from disk – 200)，过期了间接向服务器发送申请获取资源。如果资源没更新，服务器返回 304，浏览器从硬盘缓存中获取资源，并更新
过期工夫 /Etag/Last-Modified。如果资源更新了则获取最新的资源，并通过 HTTP 申请将资源返回，从新缓存资源并更新过期工夫 /Etag/Last-Modified。 - 4）如果硬盘也没有，那么会向后端发送 HTTP 网络申请。
- 5）加载到的资源缓存到硬盘和内存，并更新资源的
过期工夫 /Etag/Last-Modified。
Service Worker Cache具备较高的优先级，数据管制更为简单，操作自由度最高；Memory Cache更多的强调了一种缓存存储形式和浏览器内存缓存策略；HTTP Cache绝对于 Memory Cache 依据存储形式的不同也能叫做Disk Cache，它依赖于整个 HTTP 缓存校验流程(强缓存和协商缓存)，并通过校验来最终确定何时从缓存读取，何时从服务器更新资源；Push Cache 材料较少，利用得不多，临时只做介绍。
Service-Worker Cache(优先级最高)
Service Worker 是运行在浏览器背地的独立线程，个别能够用来实现缓存性能。应用 Service Worker 的话，传输协定必须为 HTTPS。因为 Service Worker 中波及到申请拦挡，所以必须应用 HTTPS 协定来保障平安。Service Worker 的缓存与浏览器其余内建的缓存机制不同，它能够让咱们自在管制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
Service Worker 实现缓存性能个别分为三个步骤：首先须要先注册 Service Worker，而后监听到 install 事件当前就能够缓存须要的文件，那么在下次用户拜访的时候就能够通过拦挡申请的形式查问是否存在缓存，存在缓存的话就能够间接读取缓存文件，否则就去申请数据。
当 Service Worker 没有命中缓存的时候，咱们须要去调用 fetch 函数获取数据。也就是说，如果咱们没有在 Service Worker 命中缓存的话，会依据缓存查找优先级去查找数据。然而不论咱们是从 Memory Cache 中还是从网络申请中获取的数据，浏览器都会显示咱们是从 Service Worker 中获取的内容。
Memory Cache(优先级次之)
Memory Cache 也就是内存中的缓存，次要蕴含的是以后中页面中曾经获取到的资源，例如页面上曾经下载的款式、脚本、图片等。读取内存中的数据必定比磁盘快，内存缓存尽管读取高效，可是缓存持续性很短，会随着过程的开释而开释。一旦咱们敞开 Tab 页面，内存中的缓存也就被开释了。内存缓存在缓存资源时并不关怀返回资源的 HTTP 响应头部 Cache-Control 是什么值，换句话说这是一种强依赖于浏览器本地内存管理策略的缓存形式，各个浏览器对内存缓存的解决形式也略有区别。
Memory Cache 遵循这些策略：
- 对于大文件来说，大概率是不存储在内存中的，反之优先
- 以后零碎内存使用率高的话，文件优先存储进硬盘
* HTTP Cache(优先级次之)
HTTP 缓存依据工作形式分为 强缓存 和协商缓存 ，浏览器首先会判断 强缓存 是否命中，命中失败才会尝试进行 协商缓存。
1）强缓存
- > HTTP 1.0 时代 – expires
咱们通过浏览器获取服务器近程资源时，服务器通过 http 申请 response headers 返回一个 expires 工夫戳字段(上图中蓝色局部)，例如expires: Wed, 13 Oct 2021 22:15:05 GMT，表明这个资源的过期工夫为格林威治工夫2021 年 10 月 13 日 周三 22:15:05(北京工夫 +8h= 格林威治工夫)，浏览器判断以后工夫在资源过期工夫之前的话，就会从缓存中去读取资源(如果缓存中存在的话)，否则会从新向服务器发送申请。
expires 的工作机制要求客户端工夫与服务器时间误差较小，否则缓存更新策略可能在短时间不失效。
- > HTTP 1.1 时代 – cache-control
cache-control: max-age形式也是通过服务器返回资源时携带的 response headers 中的相应字段实现的，比方：cache-control: max-age=31536000，表明资源距浏览器接管到此资源后的 31536000 秒后过期。与 expires 返回的工夫戳形式不同，cache-control 为了防止时间误差，间接返回一个工夫长度，浏览器能够依据一个本地工夫差值进行准确判断。cache-control其它相干字段还有：
i.public/private：在依赖各种代理的大型架构中，咱们不得不思考代理服务器的缓存问题，public 与 private 用来管制代理服务缓存是否能缓存资源。如果咱们为资源设置了 public，那么它既能够被浏览器缓存，也能够被代理服务器缓存；如果咱们设置了 private，则该资源只能被浏览器缓存。private 为默认值，不过在只设置 s -maxage 的状况下，代理缓存也能失效。
ii.s-maxage：针对于代理服务器的缓存问题，此字段用于示意 cache 服务器上（比方 cache CDN）的缓存的无效工夫的，只对 public 缓存无效，cache-control: max-age=3600, s-maxage=31536000。
iii.no-cache：为资源设置了 no-cache 后，每一次发动申请都不会再去询问浏览器的缓存状况，而是间接向服务端去确认该资源是否过期，间接进行 协商缓存。
iv.no-store：不应用任何缓存策略，每次申请都间接从服务器获取，并在浏览器客户端不进行资源缓存。
- > cache-control 和 expires 并存
expires 的优先级更高，当 cache-control 与 expires 同时呈现时，以 cache-control 为准，不过思考向下兼容性能够抉择同时应用两种缓存策略。
2）协商缓存
协商缓存依赖于服务端与浏览器之间的通信，在第一次获取资源时浏览器会存储 HTTP 申请的 response headers 字段：Last-Modified / Etag，当强缓存未命中的时候，它的值作为浏览器和服务器通信时携带的标记位用于判断资源是否过期，如果服务器判断资源过期的话就会从新下载资源，并更新相应标记位。如果判断资源未更新的话，会返回 304 状态码，浏览器就会复用客户端缓存资源。
- > Last-Modified 和 If-Modified-Since 形式
Last-Modified为随服务器端 HTTP 响应头部返回的工夫戳标记，示意一个资源最近一次被更新的工夫，客户端申请资源时增加上 request headers 字段 If-Modified-Since(值与 Last-Modified 雷同) 用于服务器做校验判断资源是否更新，Last-Modified: Wed, 13 Jan 2021 15:34:55 GMT。
应用 Last-Modified 存在一些弊病：
i. 命中失误 1： 当咱们更新了服务器的某个资源文件，但其理论内容并未发生变化，其相应的资源更新工夫戳会扭转，浏览器端在服务端文件并未产生扭转的状况下，仅仅通过工夫戳这种判断形式也会导致资源被齐全从新下载。
ii. 命中失误 2： If-Modified-Since 只能查看到以秒为最小计量单位的时间差，感知不到 1s 以内的文件改变的状况，这会导致一些浏览器缓存更新不及时的状况。
- > Etag 和 If-None-Match 形式
Etag就是为了补救 Last-Modified 的弊病而产生的新的协商缓存形式。Etag 为随服务器端 HTTP 申请头部返回的资源惟一标记，例如：ETag: W/"2a3b-1602480f459"，它依据资源内容而生成，能够准确感知资源的变动状况，即便屡次更新，只有内容不变，Etag 值也是不会变动的。浏览器下一次申请此资源时，request headers 里就会带上一个值雷同的名为 if-None-Match 的字段用于服务器对此资源做比照，If-None-Match: W/"2a3b-1602480f459"。
- >
Etag在感知文件变动上比Last-Modified更加精确，优先级也更高，不过Etag的生成会消耗掉局部服务器的性能，它能够作为一种辅助协商缓存形式与前者相互配合应用。当Etag和Last-Modified同时存在时，以Etag为准。
Push Cache(优先级最低)
Push Cache 是指 HTTP2 在 server push 阶段存在的缓存：
- Push Cache 是缓存的最初一道防线。浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的状况下才会去询问 Push Cache。
- Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之开释。
- 不同的页面只有共享了同一个 HTTP2 连贯，那么它们就能够共享同一个 Push Cache。
