Virtual DOM

最近接触到了Vue，跟接触过到React一样。Vue同样也有Virtual DOM这一概念。官方给出到概念是：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

真实的DOM

浏览器在渲染界面的过程中，先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上。

虚拟DOM

组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。

下面用简单的例子来说明真实DOM和虚拟DOM操作的不同点：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

如例子所示的结构，如果要删除<li>1</li>，<li>3</li>后面增加一个<li>4</li>。

用传统的办法

先删除<li>1</li>标签（remove),插入<li>4</li>标签（append)。

虚拟DOM

第一步：通过树的形式保存的dom信息，如果在页面是第一次加载的时候被渲染到浏览器中，但仍是通过虚拟dom的方式创建的

第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成。

第三步：将最终生成的虚拟DOM更新到视图中去。

相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。而且虚拟DOM通过各种算法能优化第二步的操作。