virtual DOM和真实DOM的区别_浅淡虚拟DOM（未完成）

【摘要】虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

【作者】星星

DOM，全称Document Object Model，文件对象模型， 通过将HTML文件描述为一个文件树，将HTML文件的全部内容内容描述为树的节点， 同过获取和操作DOM对象的节点，完成对HTML文件的操作

DOM是以层次结构组织的节点或信息片断的集合，HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。dom的节点包括

元素节点：是html中的标签

文本节点：标签中的文本或者是单纯存在的文本

属性节点：标签里面的属性以及属性对应的值

注释节点：每个注释是一个注释节点

一、什么是虚拟dom

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

下面是一个元素节点包含的信息

二、虚拟dom和真实dom的区别

1. 虚拟DOM不会进行排版与重绘操作 虚拟DOM就是把真实DOM转换为Javascript代码
2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
3. 真实DOM频繁排版与重绘的效率是相当低的

三、原理

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

虚拟DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来：

var element = {   
tagName: 'ul', // 节点标签名   
props: { // DOM的属性，用一个对象存储键值对     
        id: 'list'  
 },   
children: [ // 该节点的子节点     
     {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
     {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
     {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
   ] 
} 

上面对应的HTML写法是：

<ul id='list'>   
   <li class='item'>Item 1</li>   
   <li class='item'>Item 2</li>   
   <li class='item'>Item 3</li>
 </ul>

既然原来 DOM 树的信息都可以用 JavaScript 对象来表示，反过来，你就可以根据这个用 JavaScript 对象表示的树结构来构建一棵真正的DOM树。

用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。当然这样做其实没什么卵用，因为真正的页面其实没有改变。但是可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作，然后把它们应用在真正的 DOM 树上，页面就变更了。这样就可以做到：视图的结构确实是整个全新渲染了，但是最后操作DOM的时候确实只变更有不同的地方。

这就是所谓的 Virtual DOM 算法。包括几个步骤：

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了