浏览器缓存机制（优化）

浏览器缓存机制

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

接下来的内容中我们将通过以下⼏个部分来探讨浏览器缓存机制：

缓存位置
缓存策略
实际场景应⽤缓存策略

缓存位置

从缓存位置上来说分为四种，并且各⾃有优先级，当依次查找缓存且都没有命 中的时候，才会去请求⽹络
1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache
5. ⽹络请求
Service Worker
service Worker的缓存与浏览器其他内建的缓存机制不同，它可以让我们⾃由控制缓存 哪些⽂件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。 当 Service Worker没有命中缓存的时候，我们需要去调⽤ fetch 函数获取数据。也 就是说，如果我们没有在Service Worker命中缓存的话，会根据缓存查找优先级去查 找数据。但是不管我们是从 Memory Cache中还是从⽹络请求中获取的数据，浏览器都 会显示我们是从 Service Worker中获取的内容。
Memory Cache
Memory Cache也就是内存中的缓存，读取内存中的数据肯定⽐磁盘快。但是内存缓存虽 然读取⾼效，可是缓存持续性很短，会随着进程的释放⽽释放。 ⼀旦我们关闭Tab ⻚ ⾯，内存中的缓存也就被释放了。 当我们访问过⻚⾯以后，再次刷新⻚⾯，可以发现很多数据都来⾃于内存缓存。

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

先说结论，这是不可能的。⾸先计算机中的内存⼀定⽐硬盘容量⼩得多，操作系统需要精 打细算内存的使⽤，所以能让我们使⽤的内存必然不多。内存中其实可以存储⼤部分的⽂件，⽐如说JS 、 HTML 、 CSS 、图⽚等等。
当然，我通过⼀些实践和猜测也得出了⼀些结论： 对于⼤⽂件来说，⼤概率是不存储在内存中的，反之优先当前系统内存使⽤率⾼的话，⽂件优先存储进硬盘。
Disk Cache
Disk Cache也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中， ⽐之Memory Cache胜在容量和存储时效性上。
在所有浏览器缓存中， Disk Cache 覆盖⾯基本是最⼤的。它会根据 ·HTTP Herder·中的 字段判断哪些资源需要缓存，哪些资源可以不请求直接使⽤，哪些资源已经过期需要重新 请求。并且即使在跨站点的情况下，相同地址的资源⼀旦被硬盘缓存下来，就不会再次去请求数据。
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 中的缓存只能被使⽤⼀次。
浏览器可以拒绝接受已经存在的资源推送。
你可以给其他域名推送资源。
⽹络请求
如果所有缓存都没有命中的话，那么只能发起请求来获取资源了。
那么为了性能上的考虑，⼤部分的接⼝都应该选择好缓存策略，接下来我们就来学习缓存 策略这部分的内容。
** 缓存策略**
通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置HTTP Header来实现的。
强缓存
强缓存可以通过设置两种 HTTP Header实现： Expires和 Cache-Control。强缓存表示在缓存期间不需要请求，state code 为 200
Expires

Expires: Wed, 22 Oct 2020 08:41:00 GMT

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

Cache-control: max-age=30

Cache-Control 出现于HTTP/1.1，优先级⾼于Expires 。该属性值表示资源会在30秒后过期，需要再次请求。
Cache-Control可以在请求头或者响应头中设置，并且可以组合使⽤多种指令。
从图中我们可以看到，我们可以将多个指令配合起来⼀起使⽤，达到多个⽬的。⽐如说我们希望资源能被缓存下来，并且是客户端和代理服务器都能缓 存，还能设置缓存失效时间等。
⼀些常⻅指令的作⽤

协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种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优先级⽐Last-Modified ⾼。

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

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

实际场景应⽤缓存策略

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

这⾥特指除了 HTML 外的代码⽂件，
因为 HTML ⽂件⼀般不缓存或者缓存时间很短。

⼀般来说，现在都会使⽤⼯具来打包代码，那么我们就可以对⽂件名进⾏哈希处理，只有当代 码修改后才会⽣成新的⽂件名。基于此，我们就可以给代码⽂件设置缓存有效期⼀年Cache-Control: max-age=31836000，这样只有当 HTML ⽂件中引⼊的⽂件名发⽣了改变才会去 下载最新的代码⽂件，否则就⼀直使⽤缓存。

每天一句中文式外语

泰语

太辣/pi-gen-bai 坯跟掰/Hot peppery

热/long 隆/Hot heat

冷/nao 挠/Cold

我/peng 澎/I

你/kun /坤/you

他/kao 考/ he

我们/lao 捞/

他们/po-kao 泼考/Them 、They

买水果/shi-peng-le-mai 匙蓬勒卖/Buy Fruit

行李/ga-bao 嘎包/bag baggage