第20天 javascript浏览器缓存机制

缓存可以说是性能优化中简单⾼效的⼀种优化⽅式了，它可以显著减少⽹络传输所带来的 损耗。
对于⼀个数据请求来说，可以分为发起⽹络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第⼀和第三步骤中优化性能。⽐如说直接使⽤缓存⽽不发起请求，或者发起了请求但后端存储的数据和前端⼀致，那么就没有必要再将数据回传回来，这样 就减少了响应数据。

一、 缓存位置
从缓存位置上来说分为四种，并且各⾃有优先级，当依次查找缓存且都没有命 中的时候，才会去请求⽹络

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache
5. ⽹络请求

1.Service Worker

• service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们⾃由控制缓存
  哪些⽂件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

• 当 Service Worker 没有命中缓存的时候，我们需要去调⽤ fetch 函数获取数据。也 就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查 找数据。但是不管我们是从 Memory Cache 中还是从⽹络请求中获取的数据，浏览器都 会显示我们是从 Service Worker 中获取的内容

3. Memory Cache

• Memory Cache 也就是内存中的缓存，读取内存中的数据肯定⽐磁盘快。但是内存缓存虽
  然读取⾼效，可是缓存持续性很短，会随着进程的释放⽽释放。 ⼀旦我们关闭 Tab ⻚ ⾯，内存中的缓存也就被释放了。

• 当我们访问过⻚⾯以后，再次刷新⻚⾯，可以发现很多数据都来⾃于内存缓存

那么既然内存缓存这么⾼效，我们是不是能让数据都存放在内存中呢？

先说结论，这是不可能的。⾸先计算机中的内存⼀定⽐硬盘容量⼩得多，操作系统需要精 打细算内存的使⽤，所以能让我们使⽤的内存必然不多。内存中其实可以存储⼤部分的⽂ 件，⽐如说 JS 、 HTML 、 CSS 、图⽚等等当然，我通过⼀些实践和猜测也得出了⼀些结论： 对于⼤⽂件来说，⼤概率是不存储在内存中的，反之优先当前系统内存使⽤率⾼的话，⽂件优先存储进硬盘

2.Disk Cache

• Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中， ⽐之 Memory Cache胜在容量和存储时效性上。
• 在所有浏览器缓存中， Disk Cache 覆盖⾯基本是最⼤的。它会根据 ·HTTP Herder· 中的
  字段判断哪些资源需要缓存，哪些资源可以不请求直接使⽤，哪些资源已经过期需要重新
  请求。并且即使在跨站点的情况下，相同地址的资源⼀旦被硬盘缓存下来，就不会再次去 请求数据
  4.Push Cache

Push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使⽤。并 且缓存时间也很短暂，只在会话（Session ）中存在，⼀旦会话结束就被释放。

• Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普及，但是 HTTP/2 将会是⽇后的⼀个趋势
  所有的资源都能被推送，但是 Edge 和 Safari 浏览器兼容性不怎么好
• 可以推送 no-cache 和 no-store 的资源
• ⼀旦连接被关闭， Push Cache 就被释放
• 多个⻚⾯可以使⽤相同的
• HTTP/2 连接，也就是说能使⽤同样的缓存
• Push Cache 中的缓存只能被使⽤⼀次
• 浏览器可以拒绝接受已经存在的资源推送
• 你可以给其他域名推送资源

5.⽹络请求

• 如果所有缓存都没有命中的话，那么只能发起请求来获取资源了。
• 那么为了性能上的考虑，⼤部分的接⼝都应该选择好缓存策略，接下来我们就来学习缓存 策略这部分的内容

二、缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设 置 HTTP Header 来实现

1 强缓存

强缓存可以通过设置两种 HTTP Header 实现： Expires 和 CacheControl 。强缓存表示在缓存期间不需要请求，
state code 为 200

Expires

Expires 是 HTTP/1 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且 Expires 受限于本地时间，如 果修改了本地时间，可能会造成缓存失效。

Cache-control

• Cache-Control 出现于 HTTP/1.1 ，优先级⾼于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。
• Cache-Control 可以在请求头或者响应头中设置，并且可以组合使⽤多种指令

2 协商缓存

• 如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现： Last-Modified 和 ETag
• 当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态 码，并且更新浏览器缓存有效期
  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 优先级⽐ LastModified ⾼。

以上就是缓存策略的所有内容了，看到这⾥，不知道你是否存在这样⼀个疑 问。如果什么缓存策略都没设置，那么浏览器会怎么处理？

对于这种情况，浏览器会采⽤⼀个启发式的算法，通常会取响应头中的 Date 减去 LastModified 值的 10% 作为缓存时间

三、实际场景应⽤缓存策略
1.频繁变动的资源
对于频繁变动的资源，⾸先需要使⽤ Cache-Control: no-cache 使浏览器
每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否 有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据⼤⼩

2、代码⽂件
这⾥特指除了 HTML 外的代码⽂件，因为 HTML ⽂件⼀般不缓存或者缓存时 间很短
⼀般来说，现在都会使⽤⼯具来打包代码，那么我们就可以对⽂件名进⾏哈希处理，只有当代 码修改后才会⽣成新的⽂件名。基于此，我们就可以给代码⽂件设置缓存有效期⼀年 CacheControl: max-age=31536000 ，这样只有当 HTML ⽂件中引⼊的⽂件名发⽣了改变才会去 下载最新的代码⽂件，否则就⼀直使⽤缓存

更多缓存知识详解 http://blog.poetries.top/2019/01/02/browser-cache