vue如何實現單頁緩存方案分析

實現全站的頁面緩存，前進刷新，返回走緩存，而且能記住上一頁的滾動位置，參考了不少技術實現，github上的導航組件實現的原理要麼使用的keep-alive，要麼參考了keep-alive的源碼，可是隻用keep-alive無法實現相同path，不一樣參數展現不一樣view，這就有點坑了，因此須要結合本身要實現的功能，適當改造keep-alive，爲了實現每次前進都能刷新，返回走緩存還能自動定位的功能，文章陸續從如下幾個方面展開講：兩套技術方案可選，最後定的技術方案的緣由，實現的功能和原理，踩過的坑

方案一：vue的keep-alive組件

 

具體使用以下： 

<keep-alive max="10">
      <router-view/>
    </keep-alive>

爲何這麼使用?
如vue官網（https://cn.vuejs.org/v2/api/#...）介紹：

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition> 類似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今父組件鏈中。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。主要用於保留組件狀態或避免從新渲染。

由於緩存的須要一般出如今切換頁面時，因此就須要結合vue-router的router-view來實現

爲何keep-alive能實現緩存？
 

render () {
    const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // 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
      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
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }

 

如上keep-alive源碼，其中render函數是這樣實現的，要渲染的試圖組件做爲插槽內容被獲取到，當渲染到路徑匹配到的視圖組件時會根據vnode存儲的內容拿到對應的name,一次將這些組件實例放到變量cache中，這樣根據路由就能夠找到緩存的vnode，返回給createComponent方法去執行initComponent，vue組件渲染這塊的代碼以下

function initComponent (vnode, insertedVnodeQueue) {
  if (isDef(vnode.data.pendingInsert)) {
    insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
    vnode.data.pendingInsert = null
  }
  vnode.elm = vnode.componentInstance.$el
  if (isPatchable(vnode)) {
    invokeCreateHooks(vnode, insertedVnodeQueue)
    setScope(vnode)
  } else {
    // empty component root.
    // skip all element-related modules except for ref (#3455)
    registerRef(vnode)
    // make sure to invoke the insert hook
    insertedVnodeQueue.push(vnode)
  }
}

 

這裏會有 vnode.elm 緩存了 vnode 建立生成的 DOM 節點。因此對於首次渲染而言，除了在 <keep-alive> 中創建緩存，和普通組件渲染沒什麼區別。從進入到返回的大體執行流程以下

能實現的功能
可以把要緩存的組件渲染的vnode記到cache裏邊，當返回的時候用緩存裏邊的dom直接渲染，還有keep-alive組件提供的include 和 exclude屬性，能夠有條件的緩存想緩存的組件，若是配置了 max 而且緩存的長度超過了這個max的值，還要從緩存中刪除第一個

存在的問題
存在的問題是存儲vnode節點的key是name,也就是定義路由時組件對應的name，這就會致使一樣的path，不一樣參數的時候打開的是從cache裏邊拿到的vnode，會渲染出一樣的視圖出來，可是不少業務場景都是根據參數來顯示不一樣內容，而keep-alive底層並無對此作擴展，能夠看下keep-alive源碼

const key: ?string = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }
 

 vnode.key就是路由裏邊定義的name，因此要用這套方案來實現的根據不一樣參數展現不一樣視圖的功能就要對這裏的key作改造，可是keep-alive是vue自帶的，無法改底層，而後就誕生了個人第二套方案
 

方案二：navigation組件，scrollbehavior 

github上找到相似功能的組件vue-navigation，這個vue組件能夠實現返回走緩存，底層原理跟keep-alive同樣，其實是改寫了keep-alive組件，前進刷新時新增了一個參數VNK，這樣在路由發生變化的時候都會用給url帶一個參數，而且cache的key取值依賴這個參數，借鑑這個組件的思路，作了一個相似keep-alive的組件，其中key的值是getKey方法獲取的，改寫之後的render方法以下

render () {
      var vnode = this.$slots.default ? this.$slots.default[0] : null
      if (vnode) {
        vnode.key = vnode.key || (vnode.isComment ? 'comment' : vnode.tag)
        const { cache, keys } = this
        var key = getKey(this.$route, keyName)
        if (vnode.key.indexOf(key) === -1) {
          vnode.key = '__navigation-' + key + '-' + vnode.key
        }
        if (cache[key]) {
          if (vnode.key === cache[key].key) {
            vnode.componentInstance = cache[key].componentInstance
          } else {
            cache[key].componentInstance.$destroy()
            cache[key] = vnode
          }
          remove(keys, key)
          keys.push(key)
        } else {
          cache[key] = vnode
          keys.push(key)
          // prune oldest entry
          if (this.max && keys.length > parseInt(this.max)) {
            pruneCacheEntry(cache, keys[0], keys, this._vnode)
          }
        }
        vnode.data.keepAlive = true
      }
      return vnode
    }

 getKey方法實現
//url上新增參數vnk的值

export function genKey() {
  // const t  = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
  const t = 'xxxxxxxx'
  return t.replace(/[xy]/g, function (c) {
    const r = Math.random() * 16 | 0
    const v = c === 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
}
//
export function getKey(route, keyName) {
  return `${route.name || route.path}?${route.query[keyName]}`
}
 

經過新寫一個install方法掛載這個導航組件到vue上就能夠實現前進刷新，返回走緩存，而且能夠配置最大緩存數，後續開源到github

最後剩下返回上一頁記住上一頁的位置，之因此沒有用開源的這個組件的記位置，是由於直接套用須要改總體佈局，height:100%;樣式形成$(windows).scrollTop失效，總體考慮改形成本較大，仍是使用了vue-router提供的scrollBehavior,在路由配置裏引入

實現以下：

var scrollBehavior = async (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: to.meta.savedPosition || 0 })
      }, 300)
    })
  }
}
const router = new VueRouter({
  mode: 'history',
  scrollBehavior,
  routes: [{
    path: '',
    redirect: '/mobile/home.html',
    meta: {
      needMtaReport: true,
      parentsStyle: {
        height: '100%',
        minHeight: '100%'
      }
    }
  },
  {
    name: 'scienceCompetition',
    path: '/mobile/scienceCompetition.html',
    component: scienceCompetition
  }]
}

總結：

1.單頁緩存下js加載解析編譯執行的時間縮短了，返回的時候因爲走緩存js腳本的佔用時間徹底能夠忽略，從而總體上縮減了頁面的加載渲染時間

　　2. 由於項目之前不是單頁，代碼裏邊定義了不少全局變量或者全局事件綁定，改爲單頁後全局變量的值依然存在，就會致使業務邏輯出現bug，因此使用單頁須要注意全局變量或是事件的謹慎使用，具體的踩坑記錄在https://www.cnblogs.com/after...

　　3.經過push進入下一頁時，head裏邊會累加前面頁面的靜態資源，訪問的頁面越多，最後的頁面掛的靜態的資源越多，返回的時候並不會減小已經加載的靜態資源，單頁緩存是典型的空間換時間的方案，內存的開銷比較大，可否對資源動態增減以及內存佔用的優化一直在探索中，暫時沒有找到很好的解決方法。。。。。