什么是虚拟DOM，虚拟DOM的优点是什么

1.什么是虚拟DOM

　  虚拟DOM就是用来模拟DOM结构的一个js对象。

2.为什么要用虚拟DOM(优点是什么)

   1.减少对真实DOM的操作

    在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新视图的目的。这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每 次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

   虚拟dom和真实dom的对比

//真实的dom
<ul id='test'>
	<p class='hehe'>这里是p标签</p>
</ul>
//对应的虚拟dom对象
let vdom={
    tag:'ul',
    attr:{
    	id:'test'
    },
    content:[
    	{
    		tag:'p',
    		attr:{
    			class:'hehe'
    		},
    		content:'这里是p标签'
    	}
    ]
}
//将虚拟dom转为真实dom基本操作：
let ul=document.createElement(vdom.tag);
ul.id=test;
let p=document.createElement(vdom.content.tag);
ul.p.class=hehe;
//再通过append方法添加...等操作

　　dom操作和虚拟dom操作耗时对比：

let num=0
console.time('test')
// 方式一：平均 60ms   80ms
 for (var i = 0; i < 10000; i++) {
let tmp=Number(document.getElementById('test').innerHTML)
document.getElementById('test').innerHTML=tmp+1
 }
 console.timeEnd('test');
 
//方式二： 平均  1ms   0.6ms
//let num=0
//console.time('test')
// for (var i = 0; i < 10000; i++) {
//     num++
// }
// document.getElementById('test').innerHTML=num
// console.timeEnd('test');

新技术如何解决性能问题：

angular，react，vue 等框架的出现就是为了解决这个问题的。

他们的思想是每次更新 dom 都尽量避免刷新整个页面，而是有针对性的去刷新那被更改的一部分，来释放掉被无效渲染占用的 gpu，cup 性能。

angular

angular 采用的机制是 脏值检测查机制 所有使用了 ng 指令的 scope data 和 {{}} 语法的 scope data 都会被加入脏检测的队列

vue

vue 采用的是虚拟 dom 通过重写 setter ， getter 实现观察者监听 data 属性的变化生成新的虚拟 dom 通过 h 函数创建真实 dom 替换掉dom树上对应的旧 dom。

react

react 也是通过虚拟 dom 和 setState 更改 data 生成新的虚拟 dom 以及 diff 算法来计算和生成需要替换的 dom 做到局部更新的。

2.虚拟 DOM 本质上是 JavaScript 对象，可以跨平台，例如服务器渲染、Weex 开发等。

3.虚拟 DOM 可以维护程序的状态，通过对比两次状态的差异更新真实 DOM。