什么是虚拟DOM?

  • 什么是虚拟DOM?已关闭评论
  • 13 次浏览
  • A+
所属分类:Web前端
摘要

虚拟DOM就是用JS来模拟DOM结构的,它并不是真正的DOM。用传统的方式去操作DOM的时候,浏览器会从构建DOM树开始,从头到尾执行一遍流程。简单来说,就是会触发重排与重绘。

虚拟DOM就是用JS来模拟DOM结构的,它并不是真正的DOM。

为什么使用虚拟DOM?

用传统的方式去操作DOM的时候,浏览器会从构建DOM树开始,从头到尾执行一遍流程。简单来说,就是会触发重排与重绘

比如说,在一次操作中,需要更新10个DOM节点。

理想是一次性构建完成DOM树,但是浏览器并不会那么智能,在收到第一个更新DOM请求之后,并不知道后续还会有9次更新操作,最终执行10次。

很显然,这样子操作DOM的代价十分昂贵,性能开销大。

虚拟DOM的出现解决了这个问题。

如果一次操作中有10次更新DOM的操作,那么不会立即操作真实DOM,而是将这10次更新的diff内容保存在本地的一个js对象中,最终将这个js对象一次性attach到DOM树上。

为什么操作真实DOM的开销大?

其实并不是查询dom树性能开销大。

而是dom树的实现模块和js模块是分开的,这些跨模块的通讯增加了成本,以及dom操作引起了页面重绘重排,使得性能开销巨大。

因为PC的计算能力强大,原本在PC端是没有性能问题的。

但是随着移动端的发展,越来越多的页面需要在智能手机上运行展示,而手机的性能参差不齐,会出现性能问题。

前端框架如何解决性能问题?

Angular,React,Vue等这些前端框架,他们的思路是每次更新dom都尽量避免刷新整个页面,而是针对性的去刷新那被更改的一部分,来释放被无效渲染占用的gpu、cpu性能。

Angular

采用的机制是 脏值检测查机制,所有使用了 ng 指令的 scope data 和 {{}} 语法的 scope data 都会被加入脏检测的队列。

React

通过虚拟 dom 和 setState 更改 data 生成新的虚拟 dom 以及 diff 算法来计算和生成需要替换的 dom 做到局部更新的。

Vue

用的是虚拟 dom,通过重写 setter 、getter 来实现观察者监听 data 属性的变化生成新的虚拟 dom,通过 h 函数创建真实 dom 替换掉dom树上对应的旧 dom。

h函数就是vue中的createElement方法,这个函数的作用就是创建虚拟dom,追踪dom变化。

虚拟DOM和真实DOM的区别

  • 1、虚拟DOM不会触发重排与重绘,真实DOM会触发重排(不一定)与重绘。
  • 2、虚拟DOM 可以进行频繁的修改,可以有效降低大面积操作真实DOM引起的重排与重绘。真实DOM频繁排版与重绘的效率是相当低的。
  • 3、虚拟DOM通过diff算法最终与真实DOM比较差异,可以只渲染局部。

学习参考: