【综合】真实DOM和虚拟DOM的异同点。

[Dliling]

在没有Vue等框架之前，我们更改视图时，需要先获取DOM元素，然后再进行一系列操作。如列表无限加载的时候，点击加载之后，获取数据后将新数据渲染的部分追加到之前的列表中。但是，之前已经渲染过的列表信息是不应该重新渲染的，引起了页面重绘，降低了页面性能。

浏览器对渲染流程包括：解析HTML及构建DOM树——>构建render树——>布局render树——>绘制render树。每一次DOM改变从构建render树开始都要重来。

虚拟DOM是JS模拟DOM树行程虚拟DOM树，如下面的html结构：

<ul style="color: red">
    <li>apple</li>
    <li>pear</li>
</ul>

JS表示如下：

{
    sel: 'ul',
    data: {
        style: {
            color: 'red'
        }
    },
    children: [
        {
            sel: 'li',
            text: 'apple'
        },
        {
            sel: 'li',
            text: 'pear'
        }
    ]
}

虚拟DOM的优势：

1. 开发者不需要关注DOM，只需要关注数据，提升开发效率
2. 保证最少操作DOM，提升执行效率

虚拟DOM对象的属性：参考snabbdom

• sel：选择器

• data：绑定的数据(style/attribute/class...)

• children：子节点数组

• text：当前节点内容

真实DOM和虚拟DOM的区别：

1. 虚拟DOM不会进行排版和重绘
2. 虚拟DOM进行频繁修改，然后一次性更新真实DOM中需要修改的部分，最后在真实DOM中排版重绘，减少过多DOM排版和重绘损耗
3. 真实DOM的排版和重绘效率较低
4. 虚拟DOM有效减少真实DOM的排版和重绘，可以只渲染局部

是否需要虚拟DOM，关键看是否会频繁大面积更新DOM。

Vue的虚拟DOM更新时，和React有所不同，React是全量更新，可以通过shouldComponent钩子进行判断是否要重新渲染，而Vue是diff计算更新。
所以在选择框架时，要数据量的大小。当页面数据大，变化多时，选择React。若数据较少，想快速开发时选Vue。

VUE的diff简单易懂的可以移步这里

至于真实DOM和虚拟DOM快慢的问题，可以看下尤大的回答