淺析從Diff策略及源碼角度剖析diff算法

　　一般啥面試之類的都會問到循環加key值的作用，雖然一般都知道key的作用就是提高虛擬dom diff算法的效率，但是你知道它是怎樣提升的嗎？下面從diff策略及代碼角度總結一下虛擬dom diff算法的全過程。

一、Diff算法簡析

　　DIFF算法基於三個策略：

（1）Web UI中DOM節點跨層級的移動操作特別少，可以忽略不計。（tree diff）

（2）擁有相同類的兩個組件將會生成相似的樹形結構，擁有不同類的兩個組件將會生成不同的樹形結構。（component diff）

（3）對於同一層級的一組子節點，它們可以通過唯一ID進行區分。（element diff）

　　DIFF算法在執行時有三個維度，分別是Tree DIFF、Component DIFF 和 Element DIFF，執行時按順序依次執行，它們的差異僅僅因為DIFF粒度不同、執行先后順序不同。

　　對於以上三個策略，diff算法分別對tree diff、component diff、element diff進行算法優化。

1、Tree DIFF

　　基於策略一，WebUI中DOM節點跨層級的移動操作少的可以忽略不計，vue對Virtual DOM樹進行層級控制，只會對相同層級的DOM節點進行比較，即同一個父元素下的所有子節點，當發現節點已經不存在了，則會刪除掉該節點下所有的子節點，不會再進行比較。這樣只需要對DOM樹進行一次遍歷，就可以完成整個樹的比較。復雜度變為O(n);

　　疑問：當我們的DOM節點進行跨層級操作時，diff會有怎么樣的表現呢？

　　如下圖所示，A節點及其子節點被整個移動到D節點下面去，由於diff算法只會簡單的考慮同級節點的位置變換，而對於不同層級的節點，只有創建和刪除操作。所以當根節點發現A節點消失了，就會刪除A節點及其子節點，當D發現多了一個子節點A，就會創建新的A作為其子節點。

　　此時，diff的執行情況是：createA-->createB-->createC-->deleteA

 

　　Tree DIFF是對樹的每一層進行遍歷，如果某組件不存在了，則會直接銷毀。如圖所示，左邊是舊屬，右邊是新屬，第一層是R組件，一模一樣，不會發生變化；第二層進入Component DIFF，同一類型組件繼續比較下去，發現A組件沒有，所以直接刪掉A、B、C組件；繼續第三層，重新創建A、B、C組件。

　　由此可以發現，當出現節點跨層級移動時，並不會出現想象中的移動操作，而是會進行刪除，重新創建的動作，這是一種很影響性能的操作。因此官方也不建議進行DOM節點跨層級的操作。

2、Component DIFF

　　VUE、React之類的框架是基於組件構建應用的，對於組件間的比較所采用的策略也是非常簡潔和高效的。

• 如果是同一個類型的組件，則按照原策略進行Virtual DOM比較。

• 如果不是同一類型的組件，則將其判斷為dirty component，從而替換整個組價下的所有子節點。

• 如果是同一個類型的組件，有可能經過一輪Virtual DOM比較下來，並沒有發生變化。如果我們能夠提前確切知道這一點，那么就可以省下大量的diff運算時間。因此，React允許用戶通過shouldComponentUpdate()來判斷該組件是否需要進行diff算法分析。

　　如下圖所示，當組件D變為組件G時，即使這兩個組件結構相似，一旦diff算法判斷D和G是不同類型的組件，就不會比較兩者的結構，而是直接刪除組件D，然后重新創建組件G及其子節點。

　　雖然當兩個組件是不同類型但是結構相似時，進行diff算法分析會影響性能，但是比較不同類型的組件存在相似DOM樹的情況在實際開發過程中很少出現，因此這種極端因素很難在實際開發過程中造成重大影響。

　　如圖所示，第一層遍歷完，進行第二層遍歷時，D和G組件是不同類型的組件，不同類型組件直接進行替換，將D刪掉，再將G重建。

3、Element DIFF

　　當節點屬於同一層級時，diff提供了3種節點操作，分別為INSERT_MARKUP(插入)，MOVE_EXISTING(移動),REMOVE_NODE(刪除)。

• INSERT_MARKUP：新的組件類型不在舊集合中，即全新的節點，需要對新節點進行插入操作。
• MOVE_EXISTING：舊集合中有新組件類型，且element是可更新的類型，這時候就需要做移動操作，可以復用以前的DOM節點。
• REMOVE_NODE：舊組件類型，在新集合里也有，但對應的element不同則不能直接復用和更新，需要執行刪除操作，或者舊組件不在新集合里的，也需要執行刪除操作。

　　Element DIFF緊接着以上同一類型組件繼續比較下去，常見類型就是列表。同一個列表由舊變新有三種行為，插入、移動和刪除，它的比較策略是對於每一個列表指定key，先將所有列表遍歷一遍，確定要新增和刪除的，再確定需要移動的。如圖所示，第一步將D刪掉，第二步增加E，再次執行時A和B只需要移動位置即可。

二、當數據發生變化時，vue是怎么更新節點的？

　　要知道渲染真實DOM的開銷是很大的，比如有時候我們修改了某個數據，如果直接渲染到真實dom上會引起整個dom樹的重繪和重排，有沒有可能我們只更新我們修改的那一小塊dom而不要更新整個dom呢？diff算法能夠幫助我們。

　　我們先根據真實DOM生成一顆virtual DOM，當virtual DOM某個節點的數據改變后會生成一個新的Vnode，然后Vnode和oldVnode作對比，發現有不一樣的地方就直接修改在真實的DOM上，然后使oldVnode的值為Vnode。

　　diff的過程就是調用名為patch的函數，比較新舊節點，一邊比較一邊給真實的DOM打補丁。

三、virtual DOM和真實DOM的區別？

　　virtual DOM是將真實的DOM的數據抽取出來，以對象的形式模擬樹形結構。比如dom是這樣的：

<div>
    <p>123</p>
</div>

　　對應的virtual DOM（偽代碼）：

var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ] };

　　注意：VNode和oldVNode都是對象，一定要記住。

四、diff的比較方式？

　　在采取diff算法比較新舊節點的時候，比較只會在同層級進行, 不會跨層級比較。

<div>
    <p>123</p>
</div>

<div>
    <span>456</span>
</div>

　　上面的代碼會分別比較同一層的兩個div以及第二層的p和span，但是不會拿不同層級的div和span作比較。

　　詳情可看之前的博客：圖解vue中 v-for 的 :key 的作用，虛擬dom Diff算法

五、diff流程圖

　　當數據發生改變時，set方法會調用Dep.notify通知所有訂閱者Watcher，訂閱者就會調用patch給真實的DOM打補丁，更新相應的視圖。下面是流程圖：

　　具體分析patch是怎么打補丁的（代碼只保留核心部分）

function patch (oldVnode, vnode) { // some code
    if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) } else { const oEl = oldVnode.el // 當前oldVnode對應的真實元素節點
        let parentEle = api.parentNode(oEl)  // 父元素
        createEle(vnode)  // 根據Vnode生成新元素
        if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新元素添加進父元素
            api.removeChild(parentEle, oldVnode.el)  // 移除以前的舊元素節點
            oldVnode = null } } // some code 
    return vnode }

　　patch函數接收兩個參數oldVnode和Vnode分別代表新的節點和之前的舊節點。先判斷2個節點是否值得比較，如果不值得比較，那么就：

（1）獲取真實dom元素節點及其父元素；

（2）根據vNode創建新的dom元素

（3）如果父元素存在，那么將vNode生成的元素插入到老元素后面

（4）然后再刪除old老元素

　　如果值得比較，那么就執行下面一套復雜的邏輯處理：

1、判斷兩節點是否值得比較，值得比較則執行patchVnode（下面就可以看到key值的作用啦）

function sameVnode (a, b) { return ( a.key === b.key && // key值
    a.tag === b.tag &&  // 標簽名
    a.isComment === b.isComment &&  // 是否為注釋節點 // 是否都定義了data，data包含一些具體信息，例如onclick , style
    isDef(a.data) === isDef(b.data) && sameInputType(a, b) // 當標簽是<input>的時候，type必須相同
 ) }

2、不值得比較則用Vnode替換oldVnode

　　如果兩個節點都是一樣的，那么就深入檢查他們的子節點。如果兩個節點不一樣那就說明Vnode完全被改變了，就可以直接替換oldVnode。

　　雖然這兩個節點不一樣但是他們的子節點一樣怎么辦？別忘了，diff可是逐層比較的，如果第一層不一樣那么就不會繼續深入比較第二層了。（我在想這算是一個缺點嗎？相同子節點不能重復利用了...）

3、值得比較時patchVnode的執行邏輯

　　當我們確定兩個節點值得比較之后我們會對兩個節點指定patchVnode方法。那么這個方法做了什么呢？

patchVnode (oldVnode, vnode) { const el = vnode.el = oldVnode.el let i, oldCh = oldVnode.children, ch = vnode.children if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) { api.setTextContent(el, vnode.text) }else { updateEle(el, vnode, oldVnode) if (oldCh && ch && oldCh !== ch) { updateChildren(el, oldCh, ch) }else if (ch){ createEle(vnode) //create el's children dom
        }else if (oldCh){ api.removeChildren(el) } } }

　　這個函數做了以下事情：

• 找到對應的真實dom，稱為el
• 判斷Vnode和oldVnode是否指向同一個對象，如果是，那么直接return
• 如果他們都有文本節點並且不相等，那么將el的文本節點設置為Vnode的文本節點。
• 如果oldVnode有子節點而Vnode沒有，則刪除el的子節點
• 如果oldVnode沒有子節點而Vnode有，則將Vnode的子節點真實化之后添加到el
• 如果兩者都有子節點，則執行updateChildren函數比較子節點，這一步很重要

　　其他幾個點都很好理解，我們詳細來講一下updateChildren

4、updateChildren

　　代碼量很大，不方便一行一行的講解，所以下面結合一些示例圖來描述一下。

updateChildren (parentElm, oldCh, newCh) { let oldStartIdx = 0, 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 let idxInOld let elmToMove let before while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (oldStartVnode == null) {   // 對於vnode.key的比較，會把oldVnode = null
            oldStartVnode = oldCh[++oldStartIdx] }else if (oldEndVnode == null) { oldEndVnode = oldCh[--oldEndIdx] }else if (newStartVnode == null) { newStartVnode = newCh[++newStartIdx] }else if (newEndVnode == null) { newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] }else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldStartVnode, newEndVnode)) { patchVnode(oldStartVnode, newEndVnode) api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldEndVnode, newStartVnode)) { patchVnode(oldEndVnode, newStartVnode) api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] }else { // 使用key時的比較
            if (oldKeyToIdx === undefined) { oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
 } idxInOld = oldKeyToIdx[newStartVnode.key] if (!idxInOld) { api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el) newStartVnode = newCh[++newStartIdx] } else { elmToMove = oldCh[idxInOld] if (elmToMove.sel !== newStartVnode.sel) { api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el) }else { patchVnode(elmToMove, newStartVnode) oldCh[idxInOld] = null api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el) } newStartVnode = newCh[++newStartIdx] } } } if (oldStartIdx > oldEndIdx) { before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx) }else if (newStartIdx > newEndIdx) { removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) } }

　　先說一下這個函數做了什么

• 將Vnode的子節點Vch和oldVnode的子節點oldCh提取出來
• oldCh和vCh各有兩個頭尾的變量StartIdx和EndIdx，它們的2個變量相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置了key，就會用key進行比較，在比較的過程中，變量會往中間靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一個已經遍歷完了，就會結束比較。

5、圖解updateChildren

　　我們將它們取出來並分別用s和e指針指向它們的頭child和尾child

　　現在分別對oldS、oldE、S、E兩兩做sameVnode比較，有四種比較方式，當其中兩個能匹配上那么真實dom中的相應節點會移到Vnode相應的位置，這句話有點繞，打個比方

• 如果是oldS和E匹配上了，那么真實dom中的第一個節點會移到最后
• 如果是oldE和S匹配上了，那么真實dom中的最后一個節點會移到最前，匹配上的兩個指針向中間移動
• 如果四種匹配沒有一對是成功的，那么遍歷oldChild，S挨個和他們匹配，匹配成功就在真實dom中將成功的節點移到最前面，如果依舊沒有成功的，那么將S對應的節點插入到dom中對應的oldS位置，oldS和S指針向中間移動。

　　如下圖：

（1）第一步

oldS = a, oldE = d； S = a, E = b;

　　oldS和S匹配，則將dom中的a節點放到第一個，已經是第一個了就不管了，此時dom的位置為：a b d

　　此時繼續比較的：old： b  d ；new：c d b

（2）第二步

oldS = b, oldE = d； S = c, E = b;

　　oldS和E匹配，就將原本的b節點移動到最后，因為E是最后一個節點，他們位置要一致，這就是上面說的：當其中兩個能匹配上那么真實dom中的相應節點會移到Vnode相應的位置，此時dom的位置為：a d b

　　此時繼續比較的：old： d ；new：c d

（3）第三步

oldS = d, oldE = d； S = c, E = d;

　　oldE和E匹配，位置不變此時dom的位置為：a d b

　　此時繼續比較的：old 已比較完；new僅剩下c

（4）第四步

oldS++; oldE--; oldS > oldE;

　　遍歷結束，說明oldCh先遍歷完。就將剩余的vCh節點根據自己的的index插入到真實dom中去，此時dom位置為：a c d b。

　　一次模擬完成，這個匹配過程的結束有兩個條件：

• oldS > oldE表示oldCh先遍歷完，那么就將多余的vCh根據index添加到dom中去（如上圖）
• S > E表示vCh先遍歷完，那么就在真實dom中將區間為[oldS, oldE]的多余節點刪掉

　　再比如：

　　當這些節點sameVnode成功后就會緊接着執行patchVnode了，可以看一下上面的代碼

if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode) }

　　就這樣層層遞歸下去，直到將oldVnode和Vnode中的所有子節點比對完。也將dom的所有補丁都打好啦。那么現在再回過去看updateChildren的代碼會不會容易很多呢。

六、基於Diff的開發建議

1、基於tree diff：

（1）開發組件時，注意保持DOM結構的穩定；即盡可能少地動態操作DOM結構，尤其是移動操作。

（2）當節點數過大或者頁面更新次數過多時，頁面卡頓的現象會比較明顯。這時可以通過 CSS 隱藏或顯示節點，而不是真的移除或添加 DOM 節點。

2、基於component diff：

（1）注意使用 shouldComponentUpdate() 來減少組件不必要的更新。

（2）對於類似的結構應該盡量封裝成組件，既減少代碼量，又能減少component diff的性能消耗。

3、基於element diff：

（1）對於列表結構，盡量減少類似將最后一個節點移動到列表首部的操作，當節點數量過大或更新操作過於頻繁時，在一定程度上會影響渲染性能。

（2）循環渲染的必須加上key值，並且保證key是唯一不可變的值。不建議使用數組的index，因為數組變化了，index會變，但是這時候node list 的dom元素可能並沒有變。

　　其他歡迎補充。

　　虛擬DOM、DIFF算法在前端領域如雷貫耳，以前研究過，但是理論性的東西確實容易記不清，只記得一個標識一個標識比對看是否更新，其他詳細好像有點似懂非懂，所以今天又好好查了下，主要參考這篇：

詳解vue的diff算法：https://juejin.cn/post/6844903607913938951