Skip to main content

对虚拟DOM的理解?虚拟DOM主要做了什么?虚拟DOM本身是什么?

什么是虚拟DOM？#

从本质上来说，Virtual Dom是个JavaScript对象， 通过 对象的方 式来表示DOM结构。将页面的状态抽象为JS对 象的形式， 配合不同的渲染工具， 使跨平台渲染成为可能。

通过事务处理机制，将多次DOM修改的结果一次性的更 新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。

虚拟dom是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。它设计的最初目的，就是更好的跨平台，比如Node .js就没有DOM,如果想实现SSR ,那么一个方式就是借助虚拟dom,因为虚拟dom本身是js对象。在代码渲 染到页面之前，vue或者react会把代码转换成一 一个对象 (虚拟DOM)。以对象的形式来描述真实dom结构，最终渲染到页面。在每次数据发生变化前，虚拟dom都会缓存一份， 变化之时，现在的虚拟dom会与缓存的虚拟dom进行比较。

在vue或者react内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

另外现代前端框架的一个基本要求就是无须手动操作DOM,方面是因为手动操作DOM无法保证程序性能， 多人协作的项目 中如果review不严格，可能会有开 发者写出性能较低的代码，另方面更 重要的是省略手动DOM操作可以大大提高开 发效率。

为什么要用虚拟DOM？#

1. 保证性能的情况下，在不进行手动优化的情况下，提供过得去的性能#

看一下页面渲染的一个流程:

  • 解析HTNL G生成DOM?安生成CSSOM守Layout守Paint面Compiler

下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗:

  • 真实DOM:生成HTML 字符串+重建所有的DOM元素
  • Virtual DOM:生成vNode + DOMDiff +必要的dom更新

Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。尤雨溪在社区论坛中说道:框架给你的保证是， 你不需要手动优化的情况下，我依然可以给你提供过得去的性能。

2. 跨平台#

Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等 。

虚拟DOM真的比真实DOM性能好吗？#

  • 首次渲染大量DOM时，由于多了-层虚拟DOM的计算，会比innerHTML插入慢。
  • 正如它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。