什么是虚拟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 ateElement(vdom.tag);
ul.id=test;
let t.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=ElementById('test').innerHTML)
}
console.timeEnd('test');
/
/⽅式⼆：平均  1ms  0.6ms
//let num=0
//console.time('test')
// for (var i = 0; i < 10000; i++) {
//    num++
// }
// ElementById('test').innerHTML=num
// console.timeEnd('test');
新技术如何解决性能问题：
angular，react，vue 等框架的出现就是为了解决这个问题的。
他们的思想是每次更新 dom 都尽量避免刷新整个页⾯，⽽是有针对性的去刷新那被更改的⼀部分，来释放掉被⽆效渲染占⽤的 gpu，cup 性能。
angularreact耐克是什么
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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。