前端性能：缓存

缓存

缓存特征

命中率

• 某个请求能够通过缓存得到响应，称为缓存命中。
• 命中率越高，缓存利用率越高。

最大空间

• 缓存的最大空间通常在内存中，当缓存存放的数据量超过最大空间，需要淘汰部分数据来存放新的数据。

常见的缓存淘汰策略

• FIFO：先进先出，先进入缓存的数据在缓存空间不够时会优先被清除。
• LFU：最少使用策略。根据元素被使用次数判断，释放使用次数少的元素。
• LRU：最近使用策略。根据元素上一次使用的时间戳，清除最远使用时间戳的元素。
• 其他：过期时间、随机请理、优先请理大对象。

浏览器缓存

按缓存位置分类

• 对于浏览器发送的网络请求来说，在真正发起请求之前，浏览器会根据HTTP协议头的内容对缓存进行查找；
• 查找的优先级如下：
  1. Service Worker
  2. Memory Cache
  3. Disk Cache
  4. 网络请求

1. Service Worker

• service worker操作的缓存有别于浏览器内部的Memory Cache或Disk Cache的。

• 这个缓存时永久性的，即使关闭tab或者浏览器也会一直保存着。

• 清除缓存：手动调用cache.delete(resource)、容量超过限制、浏览器被清除数据。

• 如果service worker无法找到缓存，则会使用fetch方法进行资源的获取，这时候就继续往下一个缓存模式查找了。

• 经过service worker的fetch请求获取的资源，即使没有命中worker缓存或者通过网络请求获取的资源，也会标注成from serviceWorker

2. Memory Cache

• 内存中的缓存，所有的网络请求资源都会被浏览器自动加入到memory cache种，因为数量很大，所以memory cache只能是短期存储。

• 当tab被关闭时，memory cache就失效了。

• 极端情况下，当缓存过多，可能会在tab关闭之前，某些缓存就被清除了。

• 所有的请求资源分为两块：

  1. preloader：浏览器请求HTML后会进行解析，当发现js或css等需要解析执行的文件时，会使用CPU进行解析执行。preloader要做的事情就是让浏览器能够一边解析执行js或css，一边请求下一批网络资源。

     这些preloader请求来的资源就会被放在memory cach中，共后续解析执行使用。

  2. prel