虚拟dom

原创已于 2023-07-26 15:30:43 修改 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-07-26 09:39:42 首次发布

虚拟DOM是一种用JavaScript对象模拟DOM树的技术，用于减少对真实DOM的操作，提高页面性能。它通过对比虚拟DOM和真实DOM的差异，批量更新DOM，避免频繁的回流和重绘。尽管虚拟DOM并非总是比直接操作DOM快，但它能确保性能下限，简化开发，并支持跨平台应用。其目的是在数据变化时以最小代价更新DOM，提供良好的性能体验。

什么是虚拟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，在不进行手动优化的情况下，给你提供过得去的性能体验。