什么是虚拟DOM？

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

为什么使用虚拟DOM？

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

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

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

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

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

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

Q1: 为什么操作真实DOM的开销大？

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

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

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

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

Q2: 前端框架如何解决性能问题？

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

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

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

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

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

Q3: 虚拟DOM和真实DOM的区别

学习参考：