碼上歡樂
相關內容    簡體    繁體

Vue中diff算法的理解

本文轉載自   查看原文   2020-08-09 15:51   1029    Vue

Vue中diff算法的理解

diff算法用來計算出Virtual DOM中改變的部分，然后針對該部分進行DOM操作，而不用重新渲染整個頁面，渲染整個DOM結構的過程中開銷是很大的，需要瀏覽器對DOM結構進行重繪與回流，而diff算法能夠使得操作過程中只更新修改的那部分DOM結構而不更新整個DOM，這樣能夠最小化操作DOM結構，能夠最大程度上減少瀏覽器重繪與回流的規模。

虛擬DOM

diff算法的基礎是Virtual DOM，Virtual DOM是一棵以JavaScript對象作為基礎的樹，每一個節點稱為VNode，用對象屬性來描述節點，實際上它是一層對真實DOM的抽象，最終可以通過渲染操作使這棵樹映射到真實環境上，簡單來說Virtual DOM就是一個Js對象，用以描述整個文檔。
在瀏覽器中構建頁面時需要使用DOM節點描述整個文檔。

<div class="root" name="root">
    <p>1</p>
    <div>11</div>
</div>

如果使用Js對象去描述上述的節點以及文檔，那么便類似於下面的樣子，當然這不是Vue中用以描述節點的對象，Vue中用以描述一個節點的對象包括大量屬性，例如tag、data、children、text、elm、ns、context、key、componentOptions、componentInstance、parent、raw、isStatic、isRootInsert、isComment、isCloned等等，具體的屬性可以參閱Vue源碼的/dev/src/core/vdom/vnode.js。

{
    type: "tag",
    tagName: "div",
    attr: {
        className: "root"
        name: "root"
    },
    parent: null,
    children: [{
        type: "tag",
        tagName: "p",
        attr: {},
        parent: {} /* 父節點的引用 */, 
        children: [{
            type: "text",
            tagName: "text",
            parent: {} /* 父節點的引用 */, 
            content: "1"
        }]
    },{
        type: "tag",
        tagName: "div",
        attr: {},
        parent: {} /* 父節點的引用 */, 
        children: [{
            type: "text",
            tagName: "text",
            parent: {} /* 父節點的引用 */, 
            content: "11"
        }]
    }]
}

當選用diff算法進行部分更新的時候就需要比較舊DOM結構與新DOM結構的不同，此時就需要VNode來描述整個DOM結構，首先根據真實DOM生成Virtual DOM，當Virtual DOM某個節點的數據改變后會生成一個新的Vnode，然后通過newVNode和oldVNode進行對比，發現有不同之處便通過在VNode中elm屬性相對應的真實DOM節點進行patch修改於真實DOM，然后使舊的Virtual DOM賦值為新的Virtual DOM。

diff算法

當數據發生改變時，set方法會讓調用Dep.notify通知所有訂閱者Watcher數據發生更新，訂閱者就會調用patch進行比較，然后將相應的部分渲染到真實DOM結構。

時間復雜度

首先進行一次完整的diff需要O(n^3)的時間復雜度，這是一個最小編輯距離的問題，在比較字符串的最小編輯距離時使用動態規划的方案需要的時間復雜度是O(mn)，但是對於DOM來說是一個樹形結構，而樹形結構的最小編輯距離問題的時間復雜度在30多年的演進中從O(m^3n^3)演進到了O(n^3)，關於這個問題如果有興趣的話可以研究一下論文https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf。
對於原本想要提高效率而引入的diff算法使用O(n^3)的時間復雜度顯然是不太合適的，如果有1000個節點元素將需要進行十億次比較，這是一個昂貴的算法，所以必須有一些妥協來加快速度，對比較通過一些策略進行簡化，將時間復雜度縮小到O(n)，雖然並不是最小編輯距離，但是作為編輯距離與時間性能的折中是一個比較好的解決方案。

diff策略

上邊提到的O(n)時間復雜度是通過一定策略進行的，React中提到了兩個假設，在Vue中同樣適用：

  • 兩個不同類型的元素將產生不同的樹。
  • 通過渲染器附帶key屬性，開發者可以示意哪些子元素可能是穩定的。

通俗點說就是：

  • 只進行統一層級的比較，如果跨層級的移動則視為創建和刪除操作。
  • 如果是不同類型的元素，則認為是創建了新的元素，而不會遞歸比較他們的孩子。
  • 如果是列表元素等比較相似的內容，可以通過key來唯一確定是移動還是創建或刪除操作。

比較后會出現幾種情況，然后進行相應的操作：

  • 此節點被添加或移除->添加或移除新的節點。
  • 屬性被改變->舊屬性改為新屬性。
  • 文本內容被改變->舊內容改為新內容。
  • 節點tag或key是否改變->改變則移除后創建新元素。

分析

實現diff算法的部分在Vue源碼中的dev/src/core/vdom/patch.js文件中，不過Vue源碼的實現比較復雜，文章分析比較核心的代碼部分，精簡過后的最小化版本，commit id為43b98fe。
在調用patch方法時，會判斷是否是VNode，isRealElement其實就是根據有沒有nodeType來判斷是不是真實DOM，VNode是不存在這個字段的，如果不是真實DOM元素，並且這兩個節點是相同的，那就就會進入這個if內部，調用patchVnode對children進行diff以決定該如何更新。

// line 714
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
    // patch existing root node
    patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
}else{
    // ...
}

接下來看一下sameVnode方法，判斷如何算是相同節點。

// line 35
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

這里的判斷條件其實主要是兩個：

  • key必須相同，如果都是undefined則也是相同的。
  • DOM元素的標簽必須相同。

如果滿足以上條件，那么就認為是相同的VNode，因此就可以進行patchVnode操作，如果不是就認為是完全新的一個VNode，就會在上邊的判斷后執行下面的createElm。
梳理一下邏輯，當進入patch之后有兩種分支可以走，如果是第一次patch，即組件第一次掛載的時候，或者發現元素的標簽不相同了，那么就認為是不同的元素，直接進行createElm 創建新的DOM元素進行替換，否則，就是對已存在的DOM元素進行更新，那么通過patchVnode進行diff，有條件的更新以提升性能，這樣其實就實現了策略中原則的第一條，即兩個不同類型的元素將產生不同的樹，只要發現兩個元素的類型不同，我們直接刪除舊的並創建一個新的，而不是去遞歸比較。
在認為這是兩個相同的VNode之后，就需要比較並更新當前元素的差異，以及遞歸比較children，在patchVnode方法中實現了這兩部分。

// line 501
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    // ...
    if (isDef(data) && isPatchable(vnode)) {
      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
      if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }
    //...
}

cbs.update主要是用來更新attributes的，這里的cbs其實是從hooks中來的，hooks在33行有如下定義，const hooks = ['create', 'activate', 'update', 'remove', 'destroy']，其是在VNode更新的各個階段進行相應的操作，這里cbs.update包含如下幾個回調：updateAttrs、updateClass、updateDOMListeners、updateDOMProps、updateStyle、update、updateDirectives，其主要都是更新當前結點的一些相關attributes。
之后需要更新孩子節點，這時候分兩種情況：

  • 如果孩子不是textNode，那么需要再分三種情況處理。
  • 如果當前孩子是textNode那么直接更新text即可。

對孩子是VNode的三種情況：

  • 有新孩子無舊孩子，直接創建新的。
  • 有舊孩子無新孩子，直接刪除舊的。
  • 新舊孩子都有，那么調用updateChildren。
if (isUndef(vnode.text)) {
  if (isDef(oldCh) && isDef(ch)) {
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  } else if (isDef(ch)) {
    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(ch)
    }
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  } else if (isDef(oldCh)) {
    removeVnodes(oldCh, 0, oldCh.length - 1)
  } else if (isDef(oldVnode.text)) {
    nodeOps.setTextContent(elm, '')
  }
} else if (oldVnode.text !== vnode.text) {
  nodeOps.setTextContent(elm, vnode.text)
}

當新舊孩子都存在，那么便調用updateChildren方法，對於每一個孩子節點，我們依然有這么幾種可能：

  • 更新了節點
  • 刪除了節點
  • 增加了節點
  • 移動了節點

updateChildren是diff的核心算法，源代碼實現如下。

// line 404
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0
    let newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm
    
    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly
    
    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }
    
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
}

其對新舊兩個children數組分別在首位各用了一個指針，總共四個指針，由於指針僅僅對數組進行了一次遍歷，因此時間復雜度是O(n)，舉個簡單例子說明diff過程。

old VNode: a(oldStartIdx) b c d e f(oldEndIdx)
new VNode: b(newStartIdx) f g(newEndIdx)
DOM Node:  a b c d e f

首先指針相互比較，即四種對比，分別為oldStartIdx和newStartIdx、oldStartIdx和newEndIdx、oldEndIdx和newStartIdx、oldEndIdx和newEndIdx，如果沒有相等的則繼續。此時分為兩種情況，有key和無key，無key則直接創建新的DOM Node插入到a(oldStartIdx)之前，此處認為key存在，有key的話取newStartIdx的key值，到old VNode去找，記錄此時的oldKeyToIdx，隨即調整VNode，將b移動到a之前，然后找到old VNode中oldKeyToIdx對應的節點值設置為undefined，newStartIdx指針向中間靠攏，即++newStartIdx。

old VNode: a(oldStartIdx) undefined c d e f(oldEndIdx)
new VNode: b f(newStartIdx) g(newEndIdx)
DOM Node:  b a c d e f

循環繼續，此時對比oldStartIdx和newStartIdx、oldStartIdx和newEndIdx、oldEndIdx和newStartIdx、oldEndIdx和newEndIdx，發現newStartIdx與oldEndIdx相同，將DOM Node中的f進行移動調整到DOM Node中的a(oldStartIdx)之前，此時newStartIdx與oldEndIdx指針向中間靠攏，即++newStartIdx與--oldEndIdx。

old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f
new VNode: b f g(newStartIdx)(newEndIdx)
DOM Node:  b f a c d e

循環繼續，此時對比oldStartIdx和newStartIdx、oldStartIdx和newEndIdx、oldEndIdx和newStartIdx、oldEndIdx和newEndIdx，並沒有相同的情況，取newStartIdx的key值，到old VNode去找，沒有發現相同的值，則直接創建一個節點插入到DOM Node中的a(oldStartIdx)之前，newStartIdx指針向中間靠攏，即++newStartIdx。

old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f
new VNode: b f g(newEndIdx) (newStartIdx)
DOM Node:  b f g a c d e

此時循環結束，有兩個選擇：

  • 如果oldStartldx > oldEndldx，說明老節點遍歷完成了，新的節點比較多，所以多出 來的這些新節點，需要創建出來並添加到真實DOM Node后面。
  • 如果newStartldx >newEndldx，說明新節點遍歷完成了，老的節點比較多，所以多 出來的這些老節點，需要從真實DOM Node中刪除這些節點。

此時我們符合場景二，所以需要從真實DOM Node中刪除[oldStartldx，oldEndldx]區間 中的Node節點，根據上述內容，即需要刪除a c d e四個節點，至此diff完成。

old VNode: a(oldStartIdx) undefined c d e(oldEndIdx) f
new VNode: b f g(newEndIdx) (newStartIdx)
DOM Node:  b f g

diff完成之后便是將new VNode作為old VNode以便下次diff時使用，此外關於組件的diff，組件級別的diff算法比較簡單，節點不相同就進行創建和替換，節點相同的話就會對其子節點進行更新，最后關於調用createElm來根據VNode創建真實的DOM元素，如果是一個組件，那么 createComponent會返回true，因此不會進行接下來的操作，如果不是組件，會進行節點創建工作，並會遞歸對孩子創建節點。

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://github.com/aooy/blog/issues/2
https://www.zhihu.com/question/66851503
https://juejin.im/post/6844903607913938951
https://juejin.im/post/6844903592483094535
https://reactjs.org/docs/reconciliation.html
https://www.cnblogs.com/lilicat/p/13448827.html
https://www.cnblogs.com/lilicat/p/13448915.html
https://github.com/lihongxun945/myblog/issues/33
https://www.cnblogs.com/xujiazheng/p/12101764.html
https://blog.csdn.net/dongcehao/article/details/106987886
https://blog.csdn.net/qq2276031/article/details/106407647
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/151
https://leetcode-cn.com/problems/edit-distance/solution/bian-ji-ju-chi-by-leetcode-solution/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 理解Vue 2.5的Diff算法 React中diff算法的理解 vue學習——vue中的diff 算法 Vue 中 diff 算法中的key有什么作用？ Vue和React中的diff算法核心 DIFF算法淺析（二）在VUE2中的實現 vue diff算法 patch 詳解vue的diff算法 diff 算法 -vue Vue diff 算法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM