Vitural Dom & diff演算法 (一) 虛擬碼實現

發表於2015-12-18

演算法

前言：

讀React 原始碼大概是最幸福的事情，因為在社群裡有數之不盡的高手都會給出自己很獨到的見解，即使有不懂的地方也會能找到前人努力挖掘的痕跡。我反問自己，然後即使在這樣優越的環境下，還不去讀原始碼，是不是就太懶了。＃我會亂說？＃

約定

這一篇都通過虛擬碼實現，保證首先從總體上走通流程，後面的篇章都是基於這樣一個流程去實現。

開始之前

這裡必須明確一個概念，所謂的 自定義標籤 都是由很多原生標籤諸如<div>去實現的。

因此自定義標籤就可以想象成

<MyTag>                             <div class="MyTag">
    <SomeTag></someTag>     ===>       <div class="someTag"></div>
</MyTag>                            </div>

</MyTag> </div>

流程

建立虛擬DOM
真實DOM 連線虛擬DOM
檢視更新
計算 [ 新虛擬DOM ] 和 [ 舊虛擬DOM ] 的差異 ( diff )
根據計算的差異, 更新真實DOM ( patch )

這裡牽涉到兩個詞語 diff 和 patch，稍後再解釋，這裡簡單理解為［計算差異］和［應用差異］。

虛擬碼實現

注：雖然這是這個系列的第一篇，但這已經是第二遍寫了。原因是第一遍想完整模擬的時候發現，自己對演算法的瞭解太粗淺，深搜和最短字元演算法都不懂，最近和死月大大請教，所以這裡偏向思路多一點。

1. 這裡我們期望的真實DOM結構是這樣的,下面我們一步步實現

<div id="wrap">
        <span id="txt">i am some text</span>
    </div>

</div>

2. 建立虛擬DOM

 // 虛擬DOM的建構函式
    function VirtualDOM(type,props,children){
        this.type = type;
        this.props = props || {};
        this.children = children || [];
        this.rootId = null; // 本節點id
        this.mountId = null; // 掛載節點id
    }

    var textDom = new VirtualDOM('span',{id:'txt'},'i am some text');
    var wrapDom = new VirtualDOM('div',{id:'wrap'},[textDom]);

// 虛擬DOM的建構函式

function VirtualDOM(type,props,children){

this.type = type;

this.props = props || {};

this.children = children || [];

this.rootId = null; // 本節點id

this.mountId = null; // 掛載節點id

}

var textDom = new VirtualDOM('span',{id:'txt'},'i am some text');

var wrapDom = new VirtualDOM('div',{id:'wrap'},[textDom]);

3. 虛擬DOM不能夠影響真實DOM，這裡我們需要建立連線

最終目的得到這樣的字串，可以供真實DOM使用

"<div v-id="0"><span v-id="0.0">i am some text</span></div>

1	"<div v-id="0"><span v-id="0.0">i am some text</span></div>

簡單實現 ( 這裡需要記錄一下每個DOM的id )

 var rootIdx = 0; // 標誌每一個DOM的唯一id,用'.'區分層級
    function mountElement(ele){
        ele.rootId = rootIdx++; 
        var tagOpen = '<' + ele.type + ' v-id="'+ ele.rootId +'">';
        var tagClose = '</' + ele.type + '>';
        var type;                       

        // 遍歷拼湊出虛擬DOM的innerHTML
        ele.children.forEach(function(item,index){
            item.rootId = ele.rootId + '.' + index; // 區分層級
            item.moutId = ele.rootId; // 需要知道掛載在哪個物件上

            if(Array.isArray(item.children)){ // 暫且用是否陣列判斷是否為文字dom
                tagOpen += mountElement(item);
            }else{
                type = item.type;
                tagOpen += '<' + type +' v-id="' + item.rootId + '">';
                tagOpen += item.children;
                tagOpen += '</' +type + '>';
            }
        });
        tagOpen += tagClose;
        return tagOpen;
    }

    var vituralHTML = mountElement(wrapDom);
    document.querySelector('#realDom').innerHTML = mountElement(ele);

var rootIdx = 0; // 標誌每一個DOM的唯一id,用'.'區分層級

function mountElement(ele){

ele.rootId = rootIdx++;

var tagOpen = '<' + ele.type + ' v-id="'+ ele.rootId +'">';

var tagClose = '</' + ele.type + '>';

var type;

// 遍歷拼湊出虛擬DOM的innerHTML

ele.children.forEach(function(item,index){

item.rootId = ele.rootId + '.' + index; // 區分層級

item.moutId = ele.rootId; // 需要知道掛載在哪個物件上

if(Array.isArray(item.children)){ // 暫且用是否陣列判斷是否為文字dom

tagOpen += mountElement(item);

}else{

type = item.type;

tagOpen += '<' + type +' v-id="' + item.rootId + '">';

tagOpen += item.children;

tagOpen += '</' +type + '>';

}

});

tagOpen += tagClose;

return tagOpen;

}

var vituralHTML = mountElement(wrapDom);

document.querySelector('#realDom').innerHTML = mountElement(ele);

這裡做的事情，就是遍歷虛擬DOM，然後拼合虛擬DOM後，以字串形式輸出。

4. 現在我們已經建立了連線了，現在需要模擬一下檢視更新，於是我們新生成一個虛擬DOM。

var newtextDom = new VirtualDOM('span',{id:'txt'},'look,i am change!');
var newDom = new VirtualDOM('div',{id:'wrap'},[newtextDom]);

1 2	var newtextDom = new VirtualDOM('span',{id:'txt'},'look,i am change!'); var newDom = new VirtualDOM('div',{id:'wrap'},[newtextDom]);

注意:由於React是基於setState的方法去觸發檢視更新的，但這裡要描述的重點是diff，因此我們簡單帶過。

5. 我們終於進入主題了！我們激動的去比較一下它們的差異

先別激動！

為了更好的描述這個問題，我們這裡改變一下上面獲取的兩個虛擬DOM。

我們打算把結構換成這樣的，注意註釋的部分，就是兩個DOM的不同之處。

<div v-id="0">
    <div v-id="0.0">
        <span v-id="0.0.0"></span>
        <span v-id="0.0.1"></span>
    </div>
    <div v-id="0.1">
        <span v-id="0.1.0"></span>
        <span v-id="0.1.1">老的字元</span>  // <span v-id="0.1.1">新的字元</span>
    </div>
</div>

</div>

</div>

6. 比較差異

var diffQueue = []; // 記錄差異的陣列
var diffDepth = 0; // 每下去一層節點就+1
function updateDom(oldDom,newDom){  
    diffDepth++;
    diff(oldDom,newDom,diffQueue);// 比較差異
    diffDepth--;        
    if(diffDepth === 0){
        patch(oldDom,diffQueue);
        diffQueue = [];
    }       
}

var diffQueue = []; // 記錄差異的陣列

var diffDepth = 0; // 每下去一層節點就+1

function updateDom(oldDom,newDom){

diffDepth++;

diff(oldDom,newDom,diffQueue);// 比較差異

diffDepth--;

if(diffDepth === 0){

patch(oldDom,diffQueue);

diffQueue = [];

}

6. 扁平化

為了方便比較，我們把虛擬DOM，變成Map型別的資料

function flat(children){
    var key;
    var result = {};
    children.forEach(item,index){
        key = item.props.key ? item.props.key : index.toString(36);
        result[key] = item;
    }
    return result;
}

function flat(children){

var key;

var result = {};

children.forEach(item,index){

key = item.props.key ? item.props.key : index.toString(36);

result[key] = item;

}

return result;

}

8. diff

這裡開始我們就正式開始比較了

function diff(oldDom,newDom,diffQueue){
    var oldFlat = flat(oldDom.childern);
    var newFlat = generateNewMap(oldDom.childern,newDom);

    var newIndex = 0; // 作為記錄map遍歷的順序

    // 遍歷新的虛擬DOM
    for(key in newFlat){

        var oldItem = oldFlat[key];
        var newItem = generate[key];

        // 差異型別1 ：移動
        if(oldItem === newItem){ // 元素完全相同，則認為是順序移動了
            diffQueue.push({
                type:UPDATE_TYPES.MOVE,
                wrapId:oldItem.mountId, // 之前掛在物件的id
                fromIndex:oldItem.rootId, // 本身位置的id
                toIndex: nextIndex // 當前遍歷的位置
            });
        } else {

            // 差異型別2 ：刪除
            if(oldItem){ // 舊的和新的不符合，先刪除
                diffQueue.push({
                    type:UPDATE_TYPES.REMOVE,
                    wrapID:oldItem.mountId,
                    fromIndex:oldItem.rootId,
                    toIndex:null
                });

            }
            // 差異型別3 ：插入
            diffQueue.push({
                type:UPDATE_TYPES.INSERT,
                wrapId:oldItem.mountId,
                fromIndex:null,
                toIndex:nextIndex,
                ele:newItem // 方便後面渲染出innerHTML
            });             
        }
        nextIndex++;
    }

    // 遍歷老的Map，如果新的節點裡不存在，也刪除掉
    for(var key in oldFlat){

        var oldItem = oldFlat[key];
        var newItem = newFlat[key];

      // 差異型別2 ：刪除              
      diffQueue.push({
        wrapId: oldItem.mountId,
        type: UPATE_TYPES.REMOVE,
        fromIndex: oldItem.mountId,
        toIndex: null
      })                    
    }
}

function diff(oldDom,newDom,diffQueue){

var oldFlat = flat(oldDom.childern);

var newFlat = generateNewMap(oldDom.childern,newDom);

var newIndex = 0; // 作為記錄map遍歷的順序

// 遍歷新的虛擬DOM

for(key in newFlat){

var oldItem = oldFlat[key];

var newItem = generate[key];

// 差異型別1 ：移動

if(oldItem === newItem){ // 元素完全相同，則認為是順序移動了

diffQueue.push({

type:UPDATE_TYPES.MOVE,

wrapId:oldItem.mountId, // 之前掛在物件的id

fromIndex:oldItem.rootId, // 本身位置的id

toIndex: nextIndex // 當前遍歷的位置

});

} else {

// 差異型別2 ：刪除

if(oldItem){ // 舊的和新的不符合，先刪除

diffQueue.push({

type:UPDATE_TYPES.REMOVE,

wrapID:oldItem.mountId,

fromIndex:oldItem.rootId,

toIndex:null

});

}

// 差異型別3 ：插入

diffQueue.push({

type:UPDATE_TYPES.INSERT,

wrapId:oldItem.mountId,

fromIndex:null,

toIndex:nextIndex,

ele:newItem // 方便後面渲染出innerHTML

});

}

nextIndex++;

}

// 遍歷老的Map，如果新的節點裡不存在，也刪除掉

for(var key in oldFlat){

var oldItem = oldFlat[key];

var newItem = newFlat[key];

// 差異型別2 ：刪除

diffQueue.push({

wrapId: oldItem.mountId,

type: UPATE_TYPES.REMOVE,

fromIndex: oldItem.mountId,

toIndex: null

})

}

這裡注意到我們生成新的Map是通過 generateNewMap 方法的。 generateNewMap 實際上就是去遞迴呼叫diff，完成所有子類的差異比較，最終返回到差異陣列。

function generateNewMap(oldChildren,newDom,diffQueue){
    newDom.children.forEach(function(newItem,index){
        var oldItem = oldChildren[index];
        if(shouldUpdate(oldItem,newItem)){
            diff(oldItem,newItem,diffQueue);
        }
    })  
}

function generateNewMap(oldChildren,newDom,diffQueue){

newDom.children.forEach(function(newItem,index){

var oldItem = oldChildren[index];

if(shouldUpdate(oldItem,newItem)){

diff(oldItem,newItem,diffQueue);

}

})

}

7. 差異型別

這裡簡單用整型數字作為紀錄

var UPDATE_TYPES = {
    MOVE:1, //移動節點
    REMOVE:2, // 刪除節點
    INSERT:3, // 插入節點
    TEXT:4 // 節點內容更新
};

var UPDATE_TYPES = {

MOVE:1, //移動節點

REMOVE:2, // 刪除節點

INSERT:3, // 插入節點

TEXT:4 // 節點內容更新

};

8. 應用差異patch

我們已經得到了所有的差異diffQueue，是時候應用這些改動了。

拿插入作例子，我們知道了掛載的物件以及插入的位置，那麼我就可以用原生的insertBefore去執行。

function insertAt(target,source,index){
    var oldDom = target.children[index]; // 獲取目標物件下的的index位置的子元素
    source.insertBefore(oldDom);
}

function insertAt(target,source,index){

var oldDom = target.children[index]; // 獲取目標物件下的的index位置的子元素

source.insertBefore(oldDom);

}

那麼通過這些計算得到的source子元素和在目標掛載元素target中的位置index,我們就能夠應用這些變化。

下面簡單程式碼再描述一下

function patch(diffQueue){

var deleteArr = [];
var updateSpec = {};

diffQueue.forEach(function(update,index){
    if(update.type === UPDATE_TYPES.MOVE || update.type === UPDATE_TYPE.REMOVE){ // 無論是刪除還是移動，先儲存在刪除陣列裡
        var updateIndex = update.fromIndex;
        var updateTarget = document.querySelector('[v-id='+updateIndex+']');
        var wrapIndex = update.wrapId;

        // 儲存下來，方便移動使用
        updateSpec[wrapIndex] = updateSpec[wrapIndex] || [];
        updateSpec[wrapIndex][updateIndex] = updateTarget;

        // 記錄刪除
        removeArr.push(updateTarget);
    }

    // 刪除節點
    updateTarget.forEach(function(d){
        d.remove();
    });

    // 再次遍歷，將移動節點的變化處理掉
    diffQueue.forEach(function(update){
        var target = document.querySelector(update.wrapId); 

        switch (update.type) {
        case UPATE_TYPES.INSERT_MARKUP:
             var source = mountEle(update.ele);
            insertChildAt(target, source, update.toIndex);
            break;
        case UPATE_TYPES.MOVE_EXISTING:
            insertChildAt(target, updateSpec[update.wrapId][update.fromIndex], update.toIndex);
            break;
    });

});
}

var deleteArr = [];

var updateSpec = {};

diffQueue.forEach(function(update,index){

if(update.type === UPDATE_TYPES.MOVE || update.type === UPDATE_TYPE.REMOVE){ // 無論是刪除還是移動，先儲存在刪除陣列裡

var updateIndex = update.fromIndex;

var updateTarget = document.querySelector('[v-id='+updateIndex+']');

var wrapIndex = update.wrapId;

// 儲存下來，方便移動使用

updateSpec[wrapIndex] = updateSpec[wrapIndex] || [];

updateSpec[wrapIndex][updateIndex] = updateTarget;

// 記錄刪除

removeArr.push(updateTarget);

}

// 刪除節點

updateTarget.forEach(function(d){

d.remove();

});

// 再次遍歷，將移動節點的變化處理掉

diffQueue.forEach(function(update){

var target = document.querySelector(update.wrapId);

switch (update.type) {

case UPATE_TYPES.INSERT_MARKUP:

var source = mountEle(update.ele);

insertChildAt(target, source, update.toIndex);

break;

case UPATE_TYPES.MOVE_EXISTING:

insertChildAt(target, updateSpec[update.wrapId][update.fromIndex], update.toIndex);

break;

});

}

10. 大體流程再次迴歸

diff遞迴找出不同，存入差異陣列。每一個差異元素包含自身位置，父元件位置，差異型別
根據差異型別和差異資訊，對舊的虛擬DOM作處理
所有處理結束後，一次性操作真實DOM完成處理

9. 總結

呼…雖然是第二遍寫，還是不能很流暢表達，感覺抽象出來的粒度還不夠，不過機智的我已經預料到了這一切。

所以第二篇會開始用演算法真刀真槍去模擬整個庫的形式去解讀。每學習到一種解決方案還是很開心的，啦啦啦。

10. 特別推薦

http://purplebamboo.github.io/
博主貌似叫竹隱，文章質量太高了，是那種看完久久不能平復，就算是半夜都想爬起來擼程式碼，這篇文章就是照擼了一遍，還不夠爽，第二遍自己用虛擬碼擼的。
https://github.com/livoras/blog/issues
抽象能力非常強，加以通俗的語言解釋高深的演算法，受啟發好大
https://github.com/Matt-Esch/virtual-dom
權威的virtual-dom解讀，看issues的討論感覺腦洞真的好大…
http://facebook.github.io/react/docs/reconciliation.html
http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf
官方的解讀和完整的演算法解釋( 論文 ) …心目中前端的最終形態

虛擬DOM與diff演算法
2022-04-18
演算法
虛擬Dom與Diff的簡單實現
2019-07-26
React虛擬dom和diff演算法
2019-01-30
React演算法
談談虛擬dom和diff演算法
2020-04-06
演算法
詳解虛擬DOM與Diff演算法
2021-12-17
演算法
虛擬DOM和Diff演算法 - 入門級
2019-01-25
演算法
實現一個簡單的DOM diff演算法
2019-06-05
演算法
實現一個簡單的虛擬DOM
2019-06-02
React 虛擬Dom 轉成真實Dom 實現原理
2019-04-08
React
閱讀vue原始碼後，簡單實現虛擬dom
2020-12-20
Vue原始碼
React虛擬Dom渲染演算法
2018-07-25
React演算法
從零開始實現React（一）：JSX和虛擬DOM
2018-03-20
ReactJS
虛擬Dom詳解 - (一)
2019-08-07
虛擬DOM
2023-01-03
初探虛擬 DOM
2018-11-03
Vue虛擬DOM
2024-03-13
Vue
REACT——虛擬DOM
2020-07-14
React
react/vue中dom-diff簡易版實現
2019-03-01
ReactVue
虛擬dom優化效能的表現
2018-07-16
優化
vue虛擬dom原理
2018-03-26
Vue
根據除錯工具看原始碼之虛擬dom（一）
2019-04-01
除錯原始碼
深入剖析Vue原始碼 - 來，跟我一起實現diff演算法!
2019-07-25
Vue原始碼演算法
Vue3 DOM Diff 核心演算法解析
2020-10-13
Vue演算法
解密虛擬 DOM——snabbdom 核心原始碼解讀
2019-04-27
解密原始碼
40行程式碼實現React核心Diff演算法
2022-04-15
行程React演算法
React 的虛擬 DOM 和 Vue 的虛擬 DOM 有什麼區別?
2024-08-16
ReactVue
瞭解react、vue的一大核心技術：虛擬DOM的實現原理
2018-06-25
ReactVue
[譯] 認識虛擬 DOM
2019-01-05
什麼是虛擬DOM
2018-12-03
將HTML字串編譯為虛擬DOM物件的基礎實現
2021-05-08
HTML字串編譯物件
Vue 為什麼要用虛擬 DOM(Virtual DOM)
2020-10-10
Vue
通過編寫簡易虛擬DOM，來學習虛擬DOM 的知識！
2021-12-10
React虛擬DOM的好處
2018-12-14
React
React原始碼閱讀：虛擬DOM的初始化
2019-03-02
React原始碼
動手實現程式碼虛擬機器
2020-08-19
虛擬機
vue2.0的虛擬DOM渲染
2018-08-09
Vue
VirtualDOM----snabbdom虛擬dom庫 demo
2020-10-26
vue 快速入門系列 —— 虛擬 DOM
2021-04-02
Vue
react fiber 中的dom diff
2023-02-15
React

Vitural Dom & diff演算法 (一) 虛擬碼實現

前言：

約定

開始之前

流程

虛擬碼實現

1. 這裡我們期望的真實DOM結構是這樣的,下面我們一步步實現

2. 建立虛擬DOM

3. 虛擬DOM不能夠影響真實DOM，這裡我們需要建立連線

4. 現在我們已經建立了連線了，現在需要模擬一下檢視更新，於是我們新生成一個虛擬DOM。

5. 我們終於進入主題了！我們激動的去比較一下它們的差異

6. 比較差異

6. 扁平化

8. diff

7. 差異型別

8. 應用差異patch

10. 大體流程再次迴歸

9. 總結

10. 特別推薦

相關文章