前言

我们知道缓存不仅仅是面试过程中“老生常谈”的问题，也是前端性能优化方式中最重要的角色，利用好静态资源的缓存机制，可以显著提高应用的性能和稳定性；缓存面向前端而言种类有很多，今天我们来总结一下；

概述

应用在没有缓存的情况下，简单来说每次请求都会历经“请求”、“处理”、“响应” 三个流程，重复请求服务器资源；以现代前端 SPA 应用而言，网络质量正常的情况下资源请求耗时大多是秒级稍有白屏现象，如果网络质量稍差可以明显感知应用出现短暂白屏的现象；

流程图.jpg

缓存最显著的行为是复用以前获取的资源；在资源请求过程中，发现资源已经被缓存，它会拦截请求，返回该资源的缓存副本，而不会去服务器下载；这样带来的好处可以显著提升应用性能，减轻应用与服务器的通信成本，减少显示资源的请求与流量；

流程图 (1).jpg

浏览器缓存

缓存分类

浏览器缓存类型较为常见的分为三类，并且各自有优先顺序；

Service Worker

Service Worker 运行于独立线程，不会影响 JavaScript 线程，只能作用在 HTTPS 协议；它是作为浏览器与服务器之间的代理服务器，可以拦截并修改访问和资源请求，细粒度的控制缓存资源，关闭浏览器再打开依然还会存在，多用于在离线应用中；

Memory Cache

Memory Cache 是内存缓存，页面中已经抓取到的资源都会被缓存到内存中，例如：图片、样式、脚本等，这里同样也包含预加载的资源；为什么优先将资源缓存到内存呢？因为读取内存的效率相比读取磁盘的效率要高效；虽然内存缓存读取高效，可是缓存持续性很短，会随着进程的释放而释放，一旦我们关闭页面，内存中的缓存也就被释放了；

Disk Cache

Disk Cache 是磁盘缓存，在前端应用中用的相对较多，相比 Memory Cache 在缓存读取效率略逊，但胜在缓存容量与时效性上；

以市面电脑硬件角度对比二者的读写效率：

硬件	产品型号	读/写效率
固态硬盘	970 EVO Plus NVMe™ M.2	3,300/3,500MB/s
内存条	Crucial 英睿达 DDR5 4800MHz	75,767/69,262MB/s

缓存驱逐

当一个资源被缓存后，该资源应该可以被永久存储在缓存中，由于缓存只有有限的空间用于存储资源副本，所以缓存会定期地将一些资源副本删除，这个过程叫做缓存驱逐；

强缓存

强制缓存的含义是，当发送请求后，会先检索缓存中是否存在，如果存在则直接返回；不存在则请求服务器，响应后再写入缓存中；

强制缓存直接减少请求数，是提升最大的缓存策略，可以造成强缓存的字段是 Cache-control 或 Expires；

协商缓存

举个例子，当服务器上面的资源进行了更新，那么缓存中的对应资源也应该被更新；所以双方必须为该资源约定一个过期时间，在未过期之前，该资源就是新鲜的，当过了过期时间后，该资源则变为陈旧的；当发起一个请求时，缓存检索到已有一个对应的陈旧资源，则缓存会先将此请求附加一个 If-None-Match 头，发给目标服务器，以此来检查该资源是否还算新鲜的；若服务器返回了 304 （该响应不会有带有实体信息），则表示此资源仍然是新鲜的，将继续取用缓存的资源；

ETag & If-None-Match

Etag 是服务器响应，返回当前资源文件的一个唯一标识，只要资源有变更，Etag就会重新生成；假设资源是陈旧的，浏览器会将 ETag 作为 If-None-Match 的值向服务器发送请求，服务器需要比较 If-None-Match 是否与服务器中资源的 ETag 是否一致；如果匹配不上则表示资源发生过变更，直接返回最新的资源，如果是一致的话返回 304 继续使用缓存的资源；

缓存流程图

流程图 (2).jpg

缓存控制

Cache-control

用来区分对缓存机制的支持情况，它提供的不同的值来定义缓存策略；

易变资源缓存策略

缓存虽然能够提高应用的性能，但是并不是所有的资源都适用，通常有些资源是经常变更的；值取为 on-cache，意味发起的请求都会向服务器验证资源的新鲜度，如果缓存的资源验证结果是陈旧的，则会返回最新的资源，反之继续取用缓存内的资源；

Cache-Control: no-cache

时效性缓存策略

规定资源在时效内一直使用缓存资源，这属于“强缓存”，当资源时效性过期后会进行“协商缓存”；我们可以灵活控制某些资源的缓存周期，来提高应用缓存效率；

max-age 是相对于请求的时间，设置缓存时效性周期；

Cache-control: max-age=<seconds>

Expires

设置缓存到期时间，是一个具体的时间，属于“强缓存”；

Expires: Wed Mar 23 2022 18:33:47 GMT

配置这个字段后，如果资源一直处于有效期，将一直取用缓存资源，过期后会重新请求资源；Expires 是 HTTP/1.0 产物，本身存在一些缺点：

缓存过期以后，会重新请求资源，没有“协商缓存”机制；

缓存过期时间是一个具体的时间，依赖设备时间，如果时间不准确或手动调整设备时间，缓存也会随之受到影响；

在 Cache-control 中不存在这些缺点，可以作为首选缓存优化方式；

参考

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/zh-CN/docs/…

FAQ

缓存存储的文件在哪里？

在chrome浏览器的地址栏中输入 chrome://version，查看“个人资料路径”，此目录存放着各种用户数据，包括缓存副本；

下载.png

无痕模式缓存策略

无痕模式下一些静态资源、Cookie 等等不会写入磁盘缓存，而是写入内存中；当完全退出无痕模式会释放这些，不会留下任何痕迹；

浏览器缓存总结

前言

概述