Virtual DOM？它是如何提升性能的？

[GGXXMM]

Virtual DOM

Virtual DOM是虚拟节点，用一个原生JS对象去描述一个DOM节点，最少包含标签名(tag)、属性(props)和子元素(children)。

{
    tag: "div",
    props: {},
    children: [
        "Hello World", 
        {
            tag: "ul",
            props: {},
            children: [{
                tag: "li",
                props: {
                    id: 1,
                    class: "li-1"
                },
                children: ["第", 1]
            }]
        }
    ]
}

上面的Virtual DOM会生成以下的HTML：

<div>
    Hello World
    <ul>
        <li id="1" class="li-1">
            第1
        </li>
    </ul>
</div>

Virtual DOM是如何提升性能的？

Virtual DOM是通过diff算法提升频繁操作DOM节点的性能。视图更新时，diff算法通过比较新老虚拟节点，并做标记，无差异的节点不变，只更新变化的dom节点，减少页面的重排重绘，相比innerHTML粗暴渲染DOM节点大大提升了性能。