虚拟dom和diff算法前端面试必问

最新推荐文章于 2022-08-18 16:58:09 发布

小刘呀.

最新推荐文章于 2022-08-18 16:58:09 发布

阅读量793

点赞数

文章标签：前端算法面试

本文链接：https://blog.csdn.net/weixin_57089449/article/details/121756171

版权

虚拟DOM是用于减少DOM操作以提高性能的JS对象，它模拟真实DOM的结构和属性。Diff算法则在虚拟DOM变化时找出差异，仅更新必要的部分，从而避免大面积回流重绘。Vue等框架利用虚拟DOM和Diff算法实现高效视图更新。

摘要由CSDN通过智能技术生成

1）. 虚拟DOM

什么是虚拟DOM？虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。

真实的元素节点：

1
2
3
<div id="wrap">
 <p class="title">Hello world!</p>
</div>
VNode：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{undefined
 tag:'div',
 attrs:{undefined
 id:'wrap'
 },
 children:[
 {undefined
  tag:'p',
  text:'Hello world!',
  attrs:{undefined
  class:'title',
  }
 }
 ]
}

为什么使用虚拟DOM？

简单了解虚拟DOM后，是不是有小伙伴会问：Vue和React框架中为什么会用到它呢？好问题！那来解决下小伙伴的疑问。
起初我们在使用JS/JQuery时，不可避免的会大量操作DOM，而DOM的变化又会引发回流或重绘，从而降低页面渲染性能。那么怎样来减少对DOM的操作呢？此时虚拟DOM应用而生，所以虚拟DOM出现的主要目的就是为了减少频繁操作DOM而引起回流重绘所引发的性能问题的！

虚拟DOM的作用是什么？

兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环