你不知道的Virtual DOM（二）：Virtual Dom的更新

testbird 發(fā)布于2019-08-23 11:29 / 2925人閱讀

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

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

一、前言

目前最流行的兩大前端框架，React 和 Vue，都不約而同的借助 Virtual DOM 技術(shù)提高頁面的渲染效率。那么，什么是 Virtual DOM ？它是通過什么方式去提升頁面渲染效率的呢？本系列文章會詳細講解 Virtual DOM 的創(chuàng)建過程，并實現(xiàn)一個簡單的 Diff 算法來更新頁面。本文的內(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（六）：事件處理 & 異步更新

本文將會實現(xiàn)一個簡單的 VD Diff 算法，計算出差異并反映到真實的 DOM 上去。

二、思路

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

state 變化，生成新的 VD

比較 VD 與之前 VD 的異同

生成差異對象（patch）

遍歷差異對象并更新 DOM

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

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

最外層的 type 對應的是 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"
}

三、代碼實現(xiàn)

我們做一個定時器，500 毫秒運行一次，每次對 state 加 1。頁面的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}
                            
                        ))
                }
            
        
    );
}

接下來，通過對比 2 個 VD，生成差異對象。

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

    const newVDom = view();

    // 生成差異對象
    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 = [];
    
    // 獲取子元素最大長度
    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;
}

計算得出的差異對象是這個樣子的：

{
    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]
            }
        }
    ]
}

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

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

    const newVDom = view();

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

    preVDom = newVDom;

    // 給 DOM 打個補丁
    patch(element, patchObj);
}

// 給 DOM 打個補丁
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) => {
            // 更新子元素時，需要將子元素的序號傳入
            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);
        }
    })
}

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

作為對比，如果我們在生成新的 VD 后，不經(jīng)過比較，而是直接重新渲染整個 DOM 的時候，會怎樣呢？我們修改一下代碼：

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

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

    element.replaceChild(newDom, dom);

    dom = newDom;

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

    preVDom = newVDom;

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

效果如下：

可以看到，構(gòu)造渲染樹（Rendering）和繪制頁面（Painting）的時間要多一些。但另一方面花在 JS 計算（Scripting）的時間要少一些，因為不需要比較節(jié)點的變化。如果算總時間的話，重新渲染整個 DOM 花費的時間反而更少，這是為什么呢？

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

四、總結(jié)

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

P.S.: 想看完整代碼見這里，如果有必要建一個倉庫的話請留言給我：代碼