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

时间 2019-11-05

原文原文链接

欢迎关注个人公众号睿Talk，获取我最新的文章：
javascript

1、前言

目前最流行的两大前端框架，React 和 Vue，都不约而同的借助 Virtual DOM 技术提升页面的渲染效率。那么，什么是 Virtual DOM ？它是经过什么方式去提高页面渲染效率的呢？本系列文章会详细讲解 Virtual DOM 的建立过程，并实现一个简单的 Diff 算法来更新页面。本文的内容脱离于任何的前端框架，只讲最纯粹的 Virtual DOM 。敲单词太累了，下文 Virtual DOM 一概用 VD 表示。css

这是 VD 系列文章的第二篇，如下是本系列其它文章的传送门：
你不知道的 Virtual DOM（一）：Virtual Dom 介绍
 你不知道的 Virtual DOM（二）：Virtual Dom 的更新
 你不知道的 Virtual DOM（三）：Virtual Dom 更新优化
 你不知道的 Virtual DOM（四）：key 的做用
 你不知道的 Virtual DOM（五）：自定义组件
 你不知道的 Virtual DOM（六）：事件处理 & 异步更新前端

本文将会实现一个简单的 VD Diff 算法，计算出差别并反映到真实的 DOM 上去。java

2、思路

使用 VD 的框架，通常的设计思路都是页面等于页面状态的映射，即UI = render(state)。当须要更新页面的时候，无需关心 DOM 具体的变换方式，只须要改变state便可，剩下的事情（render）将由框架代劳。咱们考虑最简单的状况，当 state 发生变化时，咱们从新生成整个 VD ，触发比较的操做。上述过程分为如下四步：node

state 变化，生成新的 VD
比较 VD 与以前 VD 的异同
生成差别对象（patch）
遍历差别对象并更新 DOM

差别对象的数据结构是下面这个样子，与每个 VDOM 元素一一对应：git

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

最外层的 type 对应的是 DOM 元素的变化类型，有 4 种：新建、删除、替换和更新。props 变化的 type 只有2种：更新和删除。枚举值以下：github

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

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

3、代码实现

咱们作一个定时器，500 毫秒运行一次，每次对 state 加 1。页面的li元素的数量随着 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 (
        <div>
            Hello World
            <ul>
                {
                    // 生成元素为0到n-1的数组
                    [...Array(state.num).keys()]
                        .map( i => (
                            <li id={i} class={`li-${i}`}>
                                第{i * state.num}
                            </li>
                        ))
                }
            </ul>
        </div>
    );
}

接下来，经过对比 2 个 VD，生成差别对象。segmentfault

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);
        }
    })
}

到此为止，整个更新的流程就执行完了。能够看到页面跟咱们预期的同样，每 500 毫秒刷新一次，构造渲染树和绘制页面花的时间也很是少。

做为对比，若是咱们在生成新的 VD 后，不通过比较，而是直接从新渲染整个 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);
    */
}

效果以下：

能够看到，构造渲染树（Rendering）和绘制页面（Painting）的时间要多一些。但另外一方面花在 JS 计算（Scripting）的时间要少一些，由于不须要比较节点的变化。若是算总时间的话，从新渲染整个 DOM 花费的时间反而更少，这是为何呢？

其实缘由很简单，由于咱们的 DOM 树太简单了！节点不多，使用到的 css 也不多，因此构造渲染树和绘制页面就花不了多少时间。VD 真正的效果仍是要在真实的项目中才体现得出来。

4、总结

本文详细介绍如何实现一个简单的 VD Diff 算法，再根据计算出的差别去更新真实的 DOM 。而后对性能作了一个简单的分析，得出使用 VD 在减小渲染时间的同时增长了 JS 计算时间的结论。基于当前这个版本的代码还能作怎样的优化呢，请看下一篇的内容：你不知道的Virtual DOM（三）：Virtual Dom更新优化

P.S.: 想看完整代码见这里，若是有必要建一个仓库的话请留言给我：代码