虚拟DOM

虚拟DOM是什么？

 当用document.getElementById去获取DOM操作时，浏览器会从构建DOM树开始，从头到尾执行一遍流程，就很有可能导致操作次数过多，计算的与 DOM 节点相关的坐标值等各种值就会很消耗性能。为了解决这个问题，虚拟DOM就由此产生。

真实DOM渲染过程

浏览器渲染引擎工作流程大致分为以下4个步骤：

创建DOM树 → 创建CSSOM树 → 生成render树 → 布局render树 → 绘制render树

用JS模拟一个DOM结构

html代码：

<div id="div" class="container">
    <p>hello，编程侠</p>
    <ul style="padding: 5px">
        <li>编</li>
        <li>程</li>
        <li>侠</li>
    </ul>
</div>

JS模拟的DOM结构：

{
	tag: 'div',
    props:{
        className: 'container',
        id: 'div'
    },
    children: [
        {
            tag: 'p',
            chindren: 'hello，编程侠'
        },
        {
            tag: 'ul',
            props:{ style: 'padding: 5px' },
            children: [
                {
                    tag: 'li',
                    children: '编'
                },
                {
                    tag: 'li',
                    children: '程'
                },
                {
                    tag: 'li',
                    children: '侠'
                },
            ]
        }
    ]
}

这样就可以实现用 tag ， props 和 children 来模拟 DOM 树结构。

用 JS 模拟 DOM 树的结构的好处在于，先将页面的更新全部反映到虚拟 DOM 上，计算出最小的变更，操作最少的DOM。再加上操作内存中 JS 对象的速度是相当快的，计算出的虚拟DOM再映射到真实的DOM 上，最后才交由浏览器去绘制。既减少了绘制次数，又减少了DOM变更，这样就很大程度缓解了真实 DOM 渲染速度慢，性能消耗大的问题。