什么是虚拟DOM
用一个简单的对象去代替复杂的DOM对象,存储了对应DOM的一些重要参数,在改变DOM之前,会先比较相应虚拟DOM的数据,如果需要改变,才会将改变应用到真实DOM上
虚拟DOM的作用是什么
兼容性好。因为Vnode本质是JS对象,所以不管Node还是浏览器环境,都可以操作;减少了对DOM的操作。页面中的数据和状态变化,都通过Vnode对比,只需要在比对完之后更新DOM,不需要频繁操作,提高了页面性能;
虚拟DOM和真是DOM的区别
虚拟DOM不会进行回流和重绘;
真实DOM在频繁操作时引发的回流重绘导致性能很低;
虚拟DOM频繁修改,然后一次性对比差异并修改真实DOM,最后进行依次回流重绘,减少了真实DOM中多次回流重绘引起的性能损耗;
虚拟DOM有效降低大面积的重绘与排版,因为是和真实DOM对比,更新差异部分,所以只渲染局部;
示例
真实DOM
<ul id='list'>
<li class='item'>name</li>
<li class='item'>classroom</li>
</ul>
虚拟DOM
{
tag:'ul',
attrs:{
id:'list'
},
children:[
{
tag:'li',
attrs:{
className:'item'
},
children:['name']
},{
tag:'li',
attrs:{
className:'item'
},
children:['classroom']
}
]
}
虚拟DOM优缺点
优点
- 保证性能下限:
虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
- 跨平台:
虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
缺点
无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化
思考:
1、你觉得使用了虚拟DOM就真的不操作dom元素了吗
并不是的,只是减少用户操作dom,虚拟DOM在渲染的时候其实还是会操作dom的
2、虚拟DOM为什么会提高性能
虚拟DOM提高性能,不是说不操作DOM,而是减少操作DOM的次数,减少回流和重绘
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能
3、虚拟DOM 比 原生DOM快吗
虚拟Dom不比原生DOM快,没有任何框架可以比手动优化DOM更快,因为框架的DOM操作层需要应对任何上层可能产生的操作,所以他的实现需具有普适性。并且在内部,虚拟DOM还使用真实DOM来呈现页面或内容。因此,虚拟DOM不可能比真实dom更快
4、虚拟DOM的目的:当数据不管怎么变化,都能以最小的代价来更新DOM,在不进行手动优化的情况下,给你提供过得去的性能体验。