13.8 缓存优化 - LRU

程序的内存空间是有限的,所以我们无法无节制的对数据进行存储,这时候需要有策略去淘汰不那么重要的数据,保持最大数据存储量的一致。这种类型的策略称为缓存优化策略,根据淘汰的机制不同,常用的有以下三类。

  • 1. FIFO: 先进先出策略,我们通过记录数据使用的时间,当缓存大小即将溢出时,优先清除离当前时间最远的数据。

  • 2. LRU: 最近最少使用。LRU策略遵循的原则是,如果数据最近被访问(使用)过,那么将来被访问的几率会更高,如果以一个数组去记录数据,当有一数据被访问时,该数据会被移动到数组的末尾,表明最近被使用过,当缓存溢出时,会删除数组的头部数据,即将最不频繁使用的数据移除。

  • 3. LFU: 计数最少策略。用次数去标记数据使用频率,次数最少的会在缓存溢出时被淘汰。

这三种缓存算法各有优劣,各自适用不同场景,而我们看keep-alive在缓存时的优化处理,很明显利用了LRU的缓存策略。我们看关键的代码

  1. var keepAlive = {
  2. render: function() {
  3. ···
  4. if (cache[key]) {
  5. vnode.componentInstance = cache[key].componentInstance;
  6. remove(keys, key);
  7. keys.push(key);
  8. } else {
  9. cache[key] = vnode;
  10. keys.push(key);
  11. if (this.max && keys.length > parseInt(this.max)) {
  12. pruneCacheEntry(cache, keys[0], keys, this._vnode);
  13. }
  14. }
  15. }
  16. }
  17. function remove (arr, item) {
  18. if (arr.length) {
  19. var index = arr.indexOf(item);
  20. if (index > -1) {
  21. return arr.splice(index, 1)
  22. }
  23. }
  24. }

结合一个实际的例子分析缓存逻辑的实现。

    • 有三个组件child1,child2,child3,keep-alive的最大缓存个数设置为2
    • cache对象去存储组件vnode,key为组件名字,value为组件vnode对象,用keys数组去记录组件名字,由于是数组,所以keys为有序。
    • child1,child2组件依次访问,缓存结果为
  1. keys = ['child1', 'child2']
  2. cache = {
  3. child1: child1Vnode,
  4. child2: child2Vnode
  5. }
    • 再次访问到child1组件,由于命中了缓存,会调用remove方法把keys中的child1删除,并通过数组的push方法将child1推到尾部。缓存结果修改为
  1. keys = ['child2', 'child1']
  2. cache = {
  3. child1: child1Vnode,
  4. child2: child2Vnode
  5. }
    • 访问到child3时,由于缓存个数限制,初次缓存会执行pruneCacheEntry方法对最少访问到的数据进行删除。pruneCacheEntry的定义如下
  1. function pruneCacheEntry (cache,key,keys,current) {
  2. var cached$$1 = cache[key];
  3. // 销毁实例
  4. if (cached$$1 && (!current || cached$$1.tag !== current.tag)) {
  5. cached$$1.componentInstance.$destroy();
  6. }
  7. cache[key] = null;
  8. remove(keys, key);
  9. }

删除缓存时会把keys[0]代表的组件删除,由于之前的处理,最近被访问到的元素会位于数组的尾部,所以头部的数据往往是最少访问的,因此会优先删除头部的元素。并且会再次调用remove方法,将keys的首个元素删除。

这就是vue中对keep-alive缓存处理的优化过程。