摘要：變化的只有種更新和刪除。頁(yè)面的元素的數(shù)量隨著而變。四總結(jié)本文詳細(xì)介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的算法，再根據(jù)計(jì)算出的差異去更新真實(shí)的。

歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：

目前最流行的兩大前端框架，React 和 Vue，都不約而同的借助 Virtual DOM 技術(shù)提高頁(yè)面的渲染效率。那么，什么是 Virtual DOM ？它是通過什么方式去提升頁(yè)面渲染效率的呢？本系列文章會(huì)詳細(xì)講解 Virtual DOM 的創(chuàng)建過程，并實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Diff 算法來更新頁(yè)面。本文的內(nèi)容脫離于任何的前端框架，只講最純粹的 Virtual DOM 。敲單詞太累了，下文 Virtual DOM 一律用 VD 表示。

這是 VD 系列文章的第二篇，以下是本系列其它文章的傳送門：
你不知道的 Virtual DOM（一）：Virtual Dom 介紹
你不知道的 Virtual DOM（二）：Virtual Dom 的更新
你不知道的 Virtual DOM（三）：Virtual Dom 更新優(yōu)化
你不知道的 Virtual DOM（四）：key 的作用
你不知道的 Virtual DOM（五）：自定義組件
你不知道的 Virtual DOM（六）：事件處理 & 異步更新

本文將會(huì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 VD Diff 算法，計(jì)算出差異并反映到真實(shí)的 DOM 上去。

使用 VD 的框架，一般的設(shè)計(jì)思路都是頁(yè)面等于頁(yè)面狀態(tài)的映射，即UI = render(state)。當(dāng)需要更新頁(yè)面的時(shí)候，無需關(guān)心 DOM 具體的變換方式，只需要改變state即可，剩下的事情（render）將由框架代勞。我們考慮最簡(jiǎn)單的情況，當(dāng) state 發(fā)生變化時(shí)，我們重新生成整個(gè) VD ，觸發(fā)比較的操作。上述過程分為以下四步：

state 變化，生成新的 VD

比較 VD 與之前 VD 的異同

生成差異對(duì)象（patch）

遍歷差異對(duì)象并更新 DOM

差異對(duì)象的數(shù)據(jù)結(jié)構(gòu)是下面這個(gè)樣子，與每一個(gè) VDOM 元素一一對(duì)應(yīng)：

{
    type,
    vdom,
    props: [{
               type,
               key,
               value 
            }]
    children
}

最外層的 type 對(duì)應(yīng)的是 DOM 元素的變化類型，有 4 種：新建、刪除、替換和更新。props 變化的 type 只有2種：更新和刪除。枚舉值如下：

const nodePatchTypes = {
    CREATE: "create node",
    REMOVE: "remove node",
    REPLACE: "replace node",
    UPDATE: "update node"
}

const propPatchTypes = {
    REMOVE: "remove prop",
    UPDATE: "update prop"
}

我們做一個(gè)定時(shí)器，500 毫秒運(yùn)行一次，每次對(duì) state 加 1。頁(yè)面的li元素的數(shù)量隨著 state 而變。

let state = { num: 5 };
let timer;
let preVDom;

function render(element) {
    // 初始化的VD
    const vdom = view();
    preVDom = vdom;

    const dom = createElement(vdom);
    element.appendChild(dom);

    
    timer = setInterval(() => {
        state.num += 1;
        tick(element);
    }, 500);
}

function tick(element) {
    if (state.num > 20) {
        clearTimeout(timer);
        return;
    }

    const newVDom = view();
}

function view() {
    return (
        

            Hello World
            

                {
                    // 生成元素為0到n-1的數(shù)組
                    [...Array(state.num).keys()]
                        .map( i => (
                            

                                第{i * state.num}
                            
                        ))
                }
            
        
    );
}

接下來，通過對(duì)比 2 個(gè) VD，生成差異對(duì)象。

function tick(element) {
    if (state.num > 20) {
        clearTimeout(timer);
        return;
    }

    const newVDom = view();

    // 生成差異對(duì)象
    const patchObj = diff(preVDom, newVDom);
}

function diff(oldVDom, newVDom) {
    // 新建 node
    if (oldVDom == undefined) {
        return {
            type: nodePatchTypes.CREATE,
            vdom: newVDom
        }
    }

    // 刪除 node
    if (newVDom == undefined) {
        return {
            type: nodePatchTypes.REMOVE
        }
    }

    // 替換 node
    if (
        typeof oldVDom !== typeof newVDom ||
        ((typeof oldVDom === "string" || typeof oldVDom === "number") && oldVDom !== newVDom) ||
        oldVDom.tag !== newVDom.tag
    ) {
       return {
           type: nodePatchTypes.REPLACE,
           vdom: newVDom
       } 
    }

    // 更新 node
    if (oldVDom.tag) {
        // 比較 props 的變化
        const propsDiff = diffProps(oldVDom, newVDom);

        // 比較 children 的變化
        const childrenDiff = diffChildren(oldVDom, newVDom);
        
        // 如果 props 或者 children 有變化，才需要更新
        if (propsDiff.length > 0 || childrenDiff.some( patchObj => (patchObj !== undefined) )) {
            return {
                type: nodePatchTypes.UPDATE,
                props: propsDiff,
                children: childrenDiff
            }   
        }
        
    }
}

// 比較 props 的變化
function diffProps(oldVDom, newVDom) {
    const patches = [];

    const allProps = {...oldVDom.props, ...newVDom.props};

    // 獲取新舊所有屬性名后，再逐一判斷新舊屬性值
    Object.keys(allProps).forEach((key) => {
            const oldValue = oldVDom.props[key];
            const newValue = newVDom.props[key];

            // 刪除屬性
            if (newValue == undefined) {
                patches.push({
                    type: propPatchTypes.REMOVE,
                    key
                });
            } 
            // 更新屬性
            else if (oldValue == undefined || oldValue !== newValue) {
                patches.push({
                    type: propPatchTypes.UPDATE,
                    key,
                    value: newValue
                });
            }
        }
    )

    return patches;
}

// 比較 children 的變化
function diffChildren(oldVDom, newVDom) {
    const patches = [];
    
    // 獲取子元素最大長(zhǎng)度
    const childLength = Math.max(oldVDom.children.length, newVDom.children.length);

    // 遍歷并diff子元素
    for (let i = 0; i < childLength; i++) {
        patches.push(diff(oldVDom.children[i], newVDom.children[i]));
    }

    return patches;
}

計(jì)算得出的差異對(duì)象是這個(gè)樣子的：

{
    type: "update node",
    props: [],
    children: [
        null, 
        {
            type: "update node",
            props: [],
            children: [
                null, 
                {
                    type: "update node",
                    props: [],
                    children: [
                        null, 
                        {
                            type: "replace node",
                            vdom: 6
                        }
                    ]
                }
            ]
        },
        {
            type: "create node",
            vdom: {
                tag: "li",
                props: {
                    id: 5,
                    class: "li-5"
                },
                children: ["第", 30]
            }
        }
    ]
}

下一步就是遍歷差異對(duì)象并更新 DOM 了：

function tick(element) {
    if (state.num > 20) {
        clearTimeout(timer);
        return;
    }

    const newVDom = view();

    // 生成差異對(duì)象
    const patchObj = diff(preVDom, newVDom);

    preVDom = newVDom;

    // 給 DOM 打個(gè)補(bǔ)丁
    patch(element, patchObj);
}

// 給 DOM 打個(gè)補(bǔ)丁
function patch(parent, patchObj, index=0) {
    if (!patchObj) {
        return;
    }

    // 新建元素
    if (patchObj.type === nodePatchTypes.CREATE) {
        return parent.appendChild(createElement(patchObj.vdom));
    }

    const element = parent.childNodes[index];

    // 刪除元素
    if (patchObj.type === nodePatchTypes.REMOVE) {
        return parent.removeChild(element);
    }

    // 替換元素
    if (patchObj.type === nodePatchTypes.REPLACE) {
        return parent.replaceChild(createElement(patchObj.vdom), element);
    }

    // 更新元素
    if (patchObj.type === nodePatchTypes.UPDATE) {
        const {props, children} = patchObj;

        // 更新屬性
        patchProps(element, props);

        // 更新子元素
        children.forEach( (patchObj, i) => {
            // 更新子元素時(shí)，需要將子元素的序號(hào)傳入
            patch(element, patchObj, i)
        });
    }
}

// 更新屬性
function patchProps(element, props) {
    if (!props) {
        return;
    }

    props.forEach( patchObj => {
        // 刪除屬性
        if (patchObj.type === propPatchTypes.REMOVE) {
            element.removeAttribute(patchObj.key);
        } 
        // 更新或新建屬性
        else if (patchObj.type === propPatchTypes.UPDATE) {
            element.setAttribute(patchObj.key, patchObj.value);
        }
    })
}

到此為止，整個(gè)更新的流程就執(zhí)行完了。可以看到頁(yè)面跟我們預(yù)期的一樣，每 500 毫秒刷新一次，構(gòu)造渲染樹和繪制頁(yè)面花的時(shí)間也非常少。

作為對(duì)比，如果我們?cè)谏尚碌?VD 后，不經(jīng)過比較，而是直接重新渲染整個(gè) DOM 的時(shí)候，會(huì)怎樣呢？我們修改一下代碼：

function tick(element) {
    if (state.num > 20) {
        clearTimeout(timer);
        return;
    }

    const newVDom = view();
    newDom = createElement(newVDom);

    element.replaceChild(newDom, dom);

    dom = newDom;

    /*
    // 生成差異對(duì)象
    const patchObj = diff(preVDom, newVDom);

    preVDom = newVDom;

    // 給 DOM 打個(gè)補(bǔ)丁
    patch(element, patchObj);
    */
}

效果如下：

可以看到，構(gòu)造渲染樹（Rendering）和繪制頁(yè)面（Painting）的時(shí)間要多一些。但另一方面花在 JS 計(jì)算（Scripting）的時(shí)間要少一些，因?yàn)椴恍枰容^節(jié)點(diǎn)的變化。如果算總時(shí)間的話，重新渲染整個(gè) DOM 花費(fèi)的時(shí)間反而更少，這是為什么呢？

其實(shí)原因很簡(jiǎn)單，因?yàn)槲覀兊?DOM 樹太簡(jiǎn)單了！節(jié)點(diǎn)很少，使用到的 css 也很少，所以構(gòu)造渲染樹和繪制頁(yè)面就花不了多少時(shí)間。VD 真正的效果還是要在真實(shí)的項(xiàng)目中才體現(xiàn)得出來。

本文詳細(xì)介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 VD Diff 算法，再根據(jù)計(jì)算出的差異去更新真實(shí)的 DOM 。然后對(duì)性能做了一個(gè)簡(jiǎn)單的分析，得出使用 VD 在減少渲染時(shí)間的同時(shí)增加了 JS 計(jì)算時(shí)間的結(jié)論。基于當(dāng)前這個(gè)版本的代碼還能做怎樣的優(yōu)化呢，請(qǐng)看下一篇的內(nèi)容：你不知道的Virtual DOM（三）：Virtual Dom更新優(yōu)化

P.S.: 想看完整代碼見這里，如果有必要建一個(gè)倉(cāng)庫(kù)的話請(qǐng)留言給我：代碼