什么是虚拟DOM

森呼吸。

已于 2023-10-31 18:02:45 修改

阅读量831

点赞数 1

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

于 2023-05-31 17:10:59 首次发布

本文链接：https://blog.csdn.net/weixin_53156345/article/details/130973287

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、什么是虚拟 DOM

Virtual DOM（虚拟DOM），是由普通的 JS 对象来描述DOM对象，因为不是真实的DOM对象，所以叫 Virtual DOM。
虚拟DOM就是使用一个虚拟的 DOM 树来描述真实的 DOM 树结构和节点属性，通过比较新旧两颗虚拟 DOM 树的差异，最终只需要对修改的部分进行实际的 DOM 操作。
使用步骤：

虚拟DOM就是将当前页面的 DOM 树映射为一个 JavaScript 对象形式的虚拟 DOM。
然后当应用程序状态发生改变时，根据新状态生成一个新的虚拟 DOM。
比较新旧两个虚拟 DOM 的差异，得到需要进行修改的 DOM 元素。
根据差异列表，对有修改的 DOM 元素进行实际的 DOM 操作，使浏览器重新渲染。

二、真实DOM和虚拟DOM对比

真实DOM：

通过打印一个真实DOM的成员（div的属性）发现，一个DOM对象（div）的成员非常多，所以创建一个DOM对象的成本是非常高的。

PS: DOM对象的成员继承自原型链（HTML元素接口：div继承自HTMLDivElement），不能用Object.keys获取到。

let element = document.createElement('div')
// DOM对象的成员继承自原型链（div继承自HTMLDivElement），不能用Object.keys获取到
// console.log(Object.keys(element))
let s = ''
for (var key in element) {
  s += key + ','
}
console.log(s)

虚拟DOM：使用Virtual DOM来描述真实DOM：

{
  sel: 'div', // 标签
  data: {},
  children: undefined,
  text: 'Hello Virtual DOM', // 文本内容
  elm: undefined,
  key: undefined
}

可以发现创建一个虚拟DOM，它的成员是非常少的。也就是创建一个虚拟DOM的成本要小于创建一个真实DOM。

三、为什么使用 Virtual DOM

1.手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题。
2.虽然有 jQuery 等库简化 DOM 操作并解决了兼容性问题。
3.但是随着项目的复杂，DOM操作复杂提升，既要考虑操作数据，又要考虑操作 DOM。
4.为了简化 DOM 的复杂操作，于是出现了各种 MVVM框架，MVVM 框架解决了视图和状态的同步问题，也就是：
4.1当数据发生变化，自动更新视图
4.2当视图发生变化，自动更新数据
过去，为了简化视图的操作，可以使用模板引擎。但是模板引擎没有解决跟踪状态变化的问题，即当数据发生变化的时候，无法获取上一次的状态。只好把页面中的元素删除，然后重新创建。无法最小范围更新视图。于是 Virtual DOM 出现了。

5.Virtual DOM 的好处是，当状态改变时不需要立即更新 DOM，只需要创建一个虚拟 DOM 树来描述 DOM，6.Virtual DOM 内部将弄清楚如何有效（diff）的更新 DOM。
7.内部使用 diff 算法，找到状态的差异，只更新变化的部分。

总结：

虚拟 DOM 可以维护程序的状态，跟踪上一次的状态
通过比较前后两次状态的差异更新真实 DOM

四、虚拟 DOM 的作用

维护试图和状态的关系

虚拟DOM可以记录上一次数据的变化，只更新状态变化的部分。
复杂视图情况下提升渲染性能

比较数据变化差异，只更新差异部分的场景，使用虚拟DOM性能更优。
除了渲染成真实DOM以外，还可以渲染成其他平台使用的内容
1. 实现SSR(服务端渲染)，把虚拟DOM转换成普通的HTML字符串，常用架构
  1. Nuxt.js – 基于vue的服务端渲染框架
  2. Next.js – 基于React的服务端渲染框架
2. 原生应用(Weex/React Native)
3. 小程序(mpvue/uni-app)

五、性能对比

任何情况下，直接操作真实DOM，性能肯定高于使用虚拟DOM渲染这个完整的DOM，因为虚拟DOM还要进行转化为真实DOM的操作。

上面说的虚拟DOM性能更优，指的是在某些场景下的某些操作。

虚拟DOM的性能优势在于对DOM的子孙节点进行增删改操作。

操作类型	真实DOM	虚拟DOM
增加节点	获取父节点，添加子节点	减少逻辑代码：不需要再编写获取父节点的代码，直接在新的虚拟DOM中添加子节点，自动同步
删除节点	获取父节点，找到子节点，执行删除	减少逻辑代码：原理同上
修改子节点属性	获取子节点，找到子节点，修改属性	减少逻辑代码：原理同上
在不同层级添加修改节点	方式1：编写大量定位代码，和操作DOM的代码	减少逻辑代码：原理同上
在不同层级添加修改节点	方式2：新建一个DOM替换，其中包含一些重复的内容，消耗资源	最小范围操作DOM：不需要新建，只需对比新旧虚拟DOM，只更新差异的地方
对列表排序	创建新的列表替换	最小范围操作DOM：原理同上

使用虚拟DOM的好处：

虚拟 DOM 通过将真实 DOM 的操作转化为对 JavaScript 对象的操作，大大减少了页面渲染时的计算和 I/O 消耗。并且使用虚拟 DOM 可以进行批量更新，最终只需要对修改的部分进行实际的 DOM 操作，从而提高了页面的渲染性能。
使用虚拟 DOM 可以将前端组件的开发过程分离为单独的视图组件和管理状态组件，使代码更加清晰、可维护和可扩展。