前端進階算法3：從瀏覽器緩存淘汰策略和Vue的keep-alive學習LRU算法

時間 2020-05-15

標籤前端進階算法瀏覽器緩存淘汰策略 vue alive 學習 lru 欄目瀏覽器简体版

原文原文鏈接

引言

這個標題已經很明顯的告訴咱們：前端須要瞭解 LRU 算法！前端

這也是前端技能的亮點，當面試官在問到你前端開發中遇到過哪些算法，你也能夠把這部分丟過去！vue

本節按如下步驟切入：node

由瀏覽器緩存策略引出 LRU 算法原理
而後走進 vue 中 keep-alive 的應用
接着，透過 vue 中 keep-alive 源碼看 LRU 算法的實現
最後，來一道 leetcode 題目，咱們來實現一個 LRU 算法

按這個步驟來，徹底掌握 LRU 算法，點亮前端技能，下面就開始吧👇git

1、LRU 緩存淘汰策略

緩存在計算機網絡上隨處可見，例如：當咱們首次訪問一個網頁時，打開很慢，但當咱們再次打開這個網頁時，打開就很快。github

這就涉及緩存在瀏覽器上的應用：瀏覽器緩存。當咱們打開一個網頁時，例如 https://github.com/sisterAn/JavaScript-Algorithms ，它會在發起真正的網絡請求前，查詢瀏覽器緩存，看是否有要請求的文件，若是有，瀏覽器將會攔截請求，返回緩存文件，並直接結束請求，不會再去服務器上下載。若是不存在，纔會去服務器請求。面試

其實，瀏覽器中的緩存是一種在本地保存資源副本，它的大小是有限的，當咱們請求數過多時，緩存空間會被用滿，此時，繼續進行網絡請求就須要肯定緩存中哪些數據被保留，哪些數據被移除，這就是瀏覽器緩存淘汰策略，最多見的淘汰策略有 FIFO（先進先出）、LFU（最少使用）、LRU（最近最少使用）。正則表達式

LRU （ Least Recently Used ：最近最少使用）緩存淘汰策略，故名思義，就是根據數據的歷史訪問記錄來進行淘汰數據，其核心思想是 若是數據最近被訪問過，那麼未來被訪問的概率也更高 ，優先淘汰最近沒有被訪問到的數據。算法

畫個圖幫助咱們理解：數組

2、LRU 在 keep-alive (Vue) 上的實現

1. keep-alive

keep-alive 在 vue 中用於實現組件的緩存，當組件切換時不會對當前組件進行卸載。瀏覽器

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

最經常使用的兩個屬性：include 、 exculde ，用於組件進行有條件的緩存，能夠用逗號分隔字符串、正則表達式或一個數組來表示。

在 2.5.0 版本中，keep-alive 新增了 max 屬性，用於最多能夠緩存多少組件實例，一旦這個數字達到了，在新實例被建立以前，已緩存組件中最久沒有被訪問的實例會被銷燬掉，看，這裏就應用了 LRU 算法。即在 keep-alive 中緩存達到 max，新增緩存實例會優先淘汰最近沒有被訪問到的實例🎉🎉🎉

下面咱們透過 vue 源碼看一下具體的實現👇

2. 從 vue 源碼看 keep-alive 的實現

export default {
  name: "keep-alive",
  // 抽象組件屬性 ,它在組件實例創建父子關係的時候會被忽略,發生在 initLifecycle 的過程當中
  abstract: true, 
  props: {
    // 被緩存組件
    include: patternTypes, 
    // 不被緩存組件
    exclude: patternTypes,
    // 指定緩存大小
    max: [String, Number] 
  },
  created() {
    // 初始化用於存儲緩存的 cache 對象
    this.cache = Object.create(null);
    // 初始化用於存儲VNode key值的 keys 數組
    this.keys = []; 
  },
  destroyed() {
    for (const key in this.cache) {
      // 刪除全部緩存
      pruneCacheEntry(this.cache, key, this.keys);
    }
  },
  mounted() {
    // 監聽緩存（include）/不緩存（exclude）組件的變化
    // 在變化時，從新調整 cache
    // pruneCache：遍歷 cache，若是緩存的節點名稱與傳入的規則沒有匹配上的話，就把這個節點從緩存中移除
    this.$watch("include", val => {
      pruneCache(this, name => matches(val, name));
    });
    this.$watch("exclude", val => {
      pruneCache(this, name => !matches(val, name));
    });
  },
  render() {
    // 獲取第一個子元素的 vnode
    const slot = this.$slots.default;
    const vnode: VNode = getFirstComponentChild(slot);
    const componentOptions: ?VNodeComponentOptions =
      vnode && vnode.componentOptions;
    if (componentOptions) {
      // name 不在 inlcude 中或者在 exlude 中則直接返回 vnode，不然繼續進行下一步
      // check pattern
      const name: ?string = getComponentName(componentOptions);
      const { include, exclude } = this;
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode;
      }
      
      const { cache, keys } = this;
      // 獲取鍵，優先獲取組件的 name 字段，不然是組件的 tag
      const key: ?string =
        vnode.key == null
          ? // same constructor may get registered as different local components
            // so cid alone is not enough (#3269)
            componentOptions.Ctor.cid +
            (componentOptions.tag ? `::${componentOptions.tag}` : "")
          : vnode.key;
        
      // --------------------------------------------------
      // 下面就是 LRU 算法了，
      // 若是在緩存裏有則調整，
      // 沒有則放入（長度超過 max，則淘汰最近沒有訪問的）
      // --------------------------------------------------
      // 若是命中緩存，則從緩存中獲取 vnode 的組件實例，而且調整 key 的順序放入 keys 數組的末尾
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance;
        // make current key freshest
        remove(keys, key);
        keys.push(key);
      }
      // 若是沒有命中緩存,就把 vnode 放進緩存
      else {
        cache[key] = vnode;
        keys.push(key);
        // prune oldest entry
        // 若是配置了 max 而且緩存的長度超過了 this.max，還要從緩存中刪除第一個
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode);
        }
      }
      
      // keepAlive標記位
      vnode.data.keepAlive = true;
    }
    return vnode || (slot && slot[0]);
  }
};

// 移除 key 緩存
function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

// remove 方法（shared/util.js）
/**
 * Remove an item from an array.
 */
export function remove (arr: Array<any>, item: any): Array<any> | void {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

keep-alive源碼路徑

在 keep-alive 緩存超過 max 時，使用的緩存淘汰算法就是 LRU 算法，它在實現的過程當中用到了 cache 對象用於保存緩存的組件實例及 key 值，keys 數組用於保存緩存組件的 key ，當 keep-alive 中渲染一個須要緩存的實例時：

判斷緩存中是否已緩存了該實例，緩存了則直接獲取，並調整 key 在 keys 中的位置（移除 keys 中 key ，並放入 keys 數組的最後一位）
若是沒有緩存，則緩存該實例，若 keys 的長度大於 max （緩存長度超過上限），則移除 keys[0] 緩存

下面咱們來本身實現一個 LRU 算法吧⛽️⛽️⛽️

4、leetcode：LRU 緩存機制

運用你所掌握的數據結構，設計和實現一個 LRU (最近最少使用) 緩存機制。它應該支持如下操做：獲取數據 get 和寫入數據 put 。

獲取數據 get(key) - 若是密鑰 ( key ) 存在於緩存中，則獲取密鑰的值（老是正數），不然返回 -1 。
寫入數據 put(key, value) - 若是密鑰不存在，則寫入數據。當緩存容量達到上限時，它應該在寫入新數據以前刪除最久未使用的數據，從而爲新數據留出空間。

進階:

你是否能夠在 O(1) 時間複雜度內完成這兩種操做？

示例:

LRUCache cache = new LRUCache( 2 /* 緩存容量 */ );

cache.put(1, 1);
cache.put(2, 2);
cache.get(1);       // 返回  1
cache.put(3, 3);    // 該操做會使得密鑰 2 做廢
cache.get(2);       // 返回 -1 (未找到)
cache.put(4, 4);    // 該操做會使得密鑰 1 做廢
cache.get(1);       // 返回 -1 (未找到)
cache.get(3);       // 返回  3
cache.get(4);       // 返回  4

前面已經介紹過了 keep-alive 中LRU實現源碼，如今來看這道題是否是很簡單😊😊😊，能夠嘗試本身解答一下⛽️，而後思考一下有沒有什麼繼續優化的！歡迎提供更多的解法

答案已提交到 https://github.com/sisterAn/J... ，歡迎提交本身的解答，讓更多人看到😊