淺析vue2.0的diff算法

一、前言

如果不了解virtual dom，要理解diff的過程是比較困難的。

虛擬dom對應的是真實dom， 使用document.CreateElement 和 document.CreateTextNode創建的就是真實節點。

vue2.0才開始使用了virtual dom，有向react靠攏的意思。

同步地址(首發)：https://www.mwcxs.top/page/560.html

 

二、虛擬dom

首先，我們先看一下真實的dom，打印出一個空元素的第一層屬性，可以看到標准讓元素實現的東西太多了。

如果每次都重新生成新的元素，對性能是巨大的浪費。

var mydiv = document.createElement('div'); for(var item in mydiv){ console.log(item ); }

 

到底什么是virtual dom呢？通俗易懂的來說就是用一個簡單的對象去代替復雜的dom對象。

 

舉個簡單的例子，我們在body里插入一個class為a的div。

var mydiv = document.createElement('div'); mydiv.className = 'a'; document.body.appendChild(mydiv);

對於這個div我們可以用一個簡單的對象mydivVirtual代表它，它存儲了對應dom的一些重要參數，在改變dom之前，會先比較相應虛擬dom的數據，如果需要改變，才會將改變應用到真實dom上。

//偽代碼 var mydivVirtual = { tagName: 'DIV', className: 'a' }; var newmydivVirtual = { tagName: 'DIV', className: 'b' } if(mydivVirtual.tagName !== newmydivVirtual.tagName || mydivVirtual.className !== newmydivVirtual.className){ change(mydiv) } // 會執行相應的修改 mydiv.className = 'b'; //最后 <div class='b'></div>

為什么不直接修改dom而需要加一層virtual dom呢？

很多時候手工優化dom確實會比virtual dom效率高，對於比較簡單的dom結構用手工優化沒有問題，但當頁面結構很龐大，結構很復雜時，手工優化會花去大量時間，而且可維護性也不高，不能保證每個人都有手工優化的能力。至此，virtual dom的解決方案應運而生。

 

virtual dom是“解決過多的操作dom影響性能”的一種解決方案。

virtual dom很多時候都不是最優的操作，但它具有普適性，在效率、可維護性之間達平衡。

virutal dom的意義：

1、提供一種簡單對象去代替復雜的dom對象，從而優化dom操作

2、提供一個中間層，js去寫ui，ios安卓之類的負責渲染，就像reactNative一樣。

 

三、diff算法

vue的diff位於patch.js文件中，該算法來源於snabbdom，復雜度為O(n)。了解diff過程可以讓我們更高效的使用框架。

一篇相當經典的文章React’s diff algorithm中的圖，react的diff其實和vue的diff大同小異。所以這張圖能很好的解釋過程。

特點：1、比較只會在同層級進行, 不會跨層級比較。

舉個形象的例子

<!-- 之前 -->
<div> <!-- 層級1 --> <p> <!-- 層級2 --> <b> aoy </b> <!-- 層級3 --> <span>diff</Span> </P> </div> <!-- 之后 --> <div> <!-- 層級1 --> <p> <!-- 層級2 --> <b> aoy </b> <!-- 層級3 --> </p> <span>diff</Span> </div>

我們可能期望將<span>直接移動到<p>的后邊，這是最優的操作。

但是實際的diff操作是：1、移除<p>里的<span>；2、在創建一個新的<span>插到<p>的后邊。
因為新加的<span>在層級2，舊的在層級3，屬於不同層級的比較。

 

四、源碼分析

vue的diff位於patch.js文件中，diff的過程就是調用patch函數，就像打補丁一樣修改真實dom。

4.1patch方法

function patch (oldVnode, vnode) { if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) } else { const oEl = oldVnode.el let parentEle = api.parentNode(oEl) createEle(vnode) if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) api.removeChild(parentEle, oldVnode.el) oldVnode = null } } return vnode }

patch函數有兩個參數，vnode和oldVnode，也就是新舊兩個虛擬節點。

在這之前，我們先了解完整的vnode都有什么屬性，舉個一個簡單的例子:

// body下的 <div id="v" class="classA"><div> 對應的 oldVnode 就是 { el: div //對真實的節點的引用，本例中就是document.querySelector('#id.classA') tagName: 'DIV', //節點的標簽 sel: 'div#v.classA' //節點的選擇器 data: null, // 一個存儲節點屬性的對象，對應節點的el[prop]屬性，例如onclick , style children: [], //存儲子節點的數組，每個子節點也是vnode結構 text: null, //如果是文本節點，對應文本節點的textContent，否則為null }

el屬性引用的是此 virtual dom對應的真實dom，patch的vnode參數的el最初是null，因為patch之前它還沒有對應的真實dom。

 

patch的第一部分

if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) }

sameVnode函數就是看這兩個節點是否值得比較，代碼相當簡單：

function sameVnode(oldVnode, vnode){ return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel }

兩個vnode的key和sel相同才去比較它們，比如p和span，div.classA和div.classB都被認為是不同結構而不去比較它們。

如果值得比較會執行patchVnode(oldVnode, vnode)，稍后會詳細講patchVnode函數。

當節點不值得比較，進入else中

else { const oEl = oldVnode.el let parentEle = api.parentNode(oEl) createEle(vnode) if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) api.removeChild(parentEle, oldVnode.el) oldVnode = null } }

過程如下：

取得oldvnode.el的父節點，parentEle是真實dom
createEle(vnode)會為vnode創建它的真實dom，令vnode.el =真實dom
parentEle將新的dom插入，移除舊的dom當不值得比較時，新節點直接把老節點整個替換了

最后

return vnode

patch最后會返回vnode，vnode和進入patch之前的不同在哪？
沒錯，就是vnode.el，唯一的改變就是之前vnode.el = null, 而現在它引用的是對應的真實dom。

var oldVnode = patch (oldVnode, vnode)

至此完成一個patch過程。

 

4.2patchNode方法

兩個節點值得比較時，會調用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) } } }

const el = vnode.el = oldVnode.el ，讓vnode.el引用到現在的真實dom，當el修改時，vnode.el會同步變化。

 

節點的比較有5種情況：

1、if (oldVnode === vnode)，他們的引用一致，可以認為沒有變化。

2、if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本節點的比較，需要修改，則會調用Node.textContent = vnode.text。

3、if( oldCh && ch && oldCh !== ch ), 兩個節點都有子節點，而且它們不一樣，這樣我們會調用updateChildren函數比較子節點，這是diff的核心，后邊會講到。

4、else if (ch)，只有新的節點有子節點，調用createEle(vnode)，vnode.el已經引用了老的dom節點，createEle函數會在老dom節點上添加子節點。

5、else if (oldCh)，新節點沒有子節點，老節點有子節點，直接刪除老節點。

 

4.3updateChildren方法

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節點的左右頭尾兩側都有一個變量標記，在遍歷過程中這幾個變量都會向中間靠攏。

當oldStartIdx <= oldEndIdx或者newStartIdx <= newEndIdx時結束循環。

索引與VNode節點的對應關系：

oldStartIdx => oldStartVnode

oldEndIdx => oldEndVnode

newStartIdx => newStartVnode

newEndIdx => newEndVnode

在遍歷中，如果存在key，並且滿足sameVnode，會將該DOM節點進行復用，否則則會創建一個新的DOM節點。

首先，oldStartVnode、oldEndVnode與newStartVnode、newEndVnode兩兩比較一共有2*2=4種比較方法。

當新老VNode節點的start或者end滿足sameVnode時，也就是sameVnode(oldStartVnode, newStartVnode)或者sameVnode(oldEndVnode, newEndVnode)，直接將該VNode節點進行patchVnode即可。

如果oldStartVnode與newEndVnode滿足sameVnode，即sameVnode(oldStartVnode, newEndVnode)。

這時候說明oldStartVnode已經跑到了oldEndVnode后面去了，進行patchVnode的同時還需要將真實DOM節點移動到oldEndVnode的后面。

如果oldEndVnode與newStartVnode滿足sameVnode，即sameVnode(oldEndVnode, newStartVnode)。

這說明oldEndVnode跑到了oldStartVnode的前面，進行patchVnode的同時真實的DOM節點移動到了oldStartVnode的前面。

如果以上情況均不符合，則通過createKeyToOldIdx會得到一個oldKeyToIdx，里面存放了一個key為舊的VNode，value為對應index序列的哈希表。從這個哈希表中可以找到是否有與newStartVnode一致key的舊的VNode節點，如果同時滿足sameVnode，patchVnode的同時會將這個真實DOM（elmToMove）移動到oldStartVnode對應的真實DOM的前面。

當然也有可能newStartVnode在舊的VNode節點找不到一致的key，或者是即便key相同卻不是sameVnode，這個時候會調用createElm創建一個新的DOM節點。

到這里循環已經結束了，那么剩下我們還需要處理多余或者不夠的真實DOM節點。