缓存机制 · 前端笔记

[TOC] # 简介 ![](https://box.kancloud.cn/908f736a122ef289531188197c85f4ff_2889x869.png) 缓存可以说是性能优化中**简单高效**的一种优化方式了，它可以**显著减少网络传输所带来的损耗**。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 # 缓存位置从缓存位置上来说分为四种，并且各自有**优先级**，当依次查找缓存且都没有命中的时候，才会去请求网络 1. Service Worker 2. Memory Cache 3. Disk Cache 4. Push Cache 5. 网络请求 ## Service Worker 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 页面，内存中的缓存也就被释放了。 当我们访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存 ![](https://box.kancloud.cn/5f18a861919132e3154373f0d2e6b0ed_794x149.png) 那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？ 先说结论，这是**不可能**的。首先计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。 内存缓存中有一块重要的缓存资源是preloader相关指令（例如`<link rel="prefetch">`）下载的资源。总所周知preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源。 需要注意的事情是，**内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验**。 ## Disk Cache Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache**胜在容量和存储时效性上。** 在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。**并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。** ## Push Cache Push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。**并且缓存时间也很短暂，只在会话（Session）中存在，一旦会话结束就被释放。** Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普及，但是 HTTP/2 将会是日后的一个趋势。这里推荐阅读[HTTP/2 push is tougher than I thought](https://link.juejin.im/?target=https%3A%2F%2Fjakearchibald.com%2F2017%2Fh2-push-tougher-than-i-thought%2F)这篇文章，但是内容是英文的，我翻译一下文章中的几个结论，有能力的同学还是推荐自己阅读 * 所有的资源都能被推送，但是 Edge 和 Safari 浏览器兼容性不怎么好 * 可以推送`no-cache`和`no-store`的资源 * 一旦连接被关闭，Push Cache 就被释放 * 多个页面可以使用相同的 HTTP/2 连接，也就是说能使用同样的缓存 * Push Cache 中的缓存只能被使用一次 * 浏览器可以拒绝接受已经存在的资源推送 * 你可以给其他域名推送资源 ## 网络请求如果所有缓存都没有命中的话，那么只能发起请求来获取资源了。 那么为了性能上的考虑，大部分的接口都应该选择好缓存策略，接下来我们就来学习缓存策略这部分的内容。 # 缓存策略通常浏览器缓存策略分为两种：**强缓存**和**协商缓存**，并且缓存策略都是通过设置 HTTP Header 来实现的。 ## 强缓存强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。 ### Expires **缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点**。也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。 ~~~ Expires: Wed, 22 Oct 2018 08:41:00 GMT ~~~ `Expires`是 HTTP/1 的产物，表示资源会在`Wed, 22 Oct 2018 08:41:00 GMT`后过期，需要再次请求。并且`Expires`**受限于本地时间**，如果修改了本地时间，可能会造成缓存失效。 ### Cache-control ~~~ Cache-control: max-age=30 ~~~ `Cache-Control`出现于 HTTP/1.1，**优先级高于`Expires`**。该属性值表示资源会在 30 秒后过期，需要再次请求。 `Cache-Control`**可以在请求头或者响应头中设置**，并且可以组合使用多种指令 ![](https://box.kancloud.cn/daee5394f08455454ba205888d0e2aea_595x600.png) 从图中我们可以看到，我们可以将**多个指令配合起来一起使用**，达到多个目的。比如说我们希望资源能被缓存下来，并且是客户端和代理服务器都能缓存，还能设置缓存失效时间等等。 Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令： ![](https://box.kancloud.cn/4070bf2db219087dc846a3849c856003_770x486.png) * **public**：**所有内容都将被缓存（客户端和代理服务器都可缓存）**。具体来说响应可被任何中间节点缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。 * **private**：**所有内容只有客户端可以缓存**，Cache-Control的默认取值。具体来说，表示中间节点不允许缓存，对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。 * **no-cache**：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。**需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。** * **no-store**：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 * **max-age**：max-age=xxx (xxx is numeric)表示缓存内容将在xxx秒后失效 * **s-maxage**（单位为s)：同max-age作用一样，只在代理服务器中生效（比如CDN缓存）。比如当s-maxage=60时，在这60秒中，即使更新了CDN的内容，浏览器也不会进行请求。max-age用于普通缓存，而s-maxage用于代理缓存。**s-maxage的优先级高于max-age**。如果存在s-maxage，则会覆盖掉max-age和Expires header。 * **max-stale**：能容忍的最大过期时间。max-stale指令标示了客户端愿意接收一个已经过期了的响应。如果指定了max-stale的值，则最大容忍时间为对应的秒数。如果没有指定，那么说明浏览器愿意接收任何age的响应（age表示响应由源站生成或确认的时间与当前时间的差值）。 * **min-fresh**：能够容忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应。 ### Expires和Cache-Control两者对比其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，**两者同时存在的话，Cache-Control优先级高于Expires**；在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容，**那我们如何获知服务器端内容是否已经发生了更新呢**？此时我们需要用到协商缓存策略。 ## 协商缓存 **协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。** 当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。 ![](https://box.kancloud.cn/04e0f1719bff88ae0902fee3bd1e5268_474x215.png) 如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：`Last-Modified`和`ETag`。 ### Last-Modified 和 If-Modified-Since `Last-Modified`表示本地文件最后修改日期，`If-Modified-Since`会将`Last-Modified`的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。但是`Last-Modified`存在一些弊端： * 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成`Last-Modified`被修改，服务端不能命中缓存导致发送相同的资源 * 因为`Last-Modified`只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源因为以上这些弊端，所以在 HTTP / 1.1 出现了`ETag`。 ### ETag 和 If-None-Match `ETag`类似于文件指纹，`If-None-Match`会将当前`ETag`发送给服务器，询问该资源`ETag`是否变动，有变动的话就将新的资源发送回来。并且`ETag`优先级比`Last-Modified`高。以上就是缓存策略的所有内容了，看到这里，不知道你是否存在这样一个疑问。**如果什么缓存策略都没设置，那么浏览器会怎么处理？** 对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的`Date`减去`Last-Modified`值的 10% 作为缓存时间。 # 缓存机制 **强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存**。具体流程图如下： ![](https://box.kancloud.cn/8c82ddfe08d49dfba9601e0c0440f720_834x878.png) **如果什么缓存策略都没设置，那么浏览器会怎么处理？** 对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。 # 实际场景应用缓存策略单纯了解理论而不付诸于实践是没有意义的，接下来我们来通过几个场景学习下如何使用这些理论。 ## 频繁变动的资源对于频繁变动的资源，首先需要使用`Cache-Control: no-cache`使浏览器每次都请求服务器，然后配合`ETag`或者`Last-Modified`来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。 ## 代码文件这里特指除了 HTML 外的代码文件，因为 HTML 文件一般不缓存或者缓存时间很短。一般来说，现在都会使用工具来打包代码，那么我们就可以对文件名进行哈希处理，只有当代码修改后才会生成新的文件名。基于此，我们就可以给代码文件设置缓存有效期一年`Cache-Control: max-age=31536000`，这样只有当 HTML 文件中引入的文件名发生了改变才会去下载最新的代码文件，否则就一直使用缓存。 # 用户操作行为与缓存用户在使用浏览器的时候，会有各种操作，比如输入地址后回车，按F5刷新等，这些行为会对缓存有什么影响呢？ ![](https://box.kancloud.cn/a45981e4ebf36cd438f1142050cf3929_490x171.png) # 参考资料 [深入理解浏览器的缓存机制](https://www.jianshu.com/p/54cc04190252) * 前端面试之道 - 掘金小册 [no-cache,max-age=0,nostore区别及304原理](https://www.zhoulujun.cn/html/theory/network/2018_0306_8078.html)