26-虚拟DOM：虚拟DOM和实际的DOM有何不同？26-虚拟DOM：虚拟DOM和实际的DOM有何不同？
虚拟DOM是最近⾮常⽕的技术，两⼤著名前端框架React和Vue都使⽤了虚拟DOM，所以我觉得⾮常有必要
结合浏览器的⼯作机制对虚拟DOM进⾏⼀次分析。当然了，React和Vue框架本⾝所蕴含的知识点⾮常多，
⽽且也不是我们专栏的重点，所以在这⾥我们还是把重⼼聚焦在虚拟DOM上。
在本⽂我们会先聊聊DOM的⼀些缺陷，然后在此基础上介绍虚拟DOM是如何解决这些缺陷的，最后再站在
双缓存和MVC的视⻆来聊聊虚拟DOM。理解了这些会让你对⽬前的前端框架有⼀个更加底层的认识，这也
有助于你更好地理解这些前端框架。
DOM的缺陷DOM的缺陷
通过前⾯⼀系列⽂章的学习，你对DOM的⽣成过程应该已经有了⽐较深刻的理解，并且也知道了通过
JavaScript操纵DOM是会影响到整个渲染流⽔线的。另外，DOM还提供了⼀组JavaScript接⼝⽤来遍历或
者修改节点，这套接⼝包含了getElementById、removeChild、appendChild等⽅法。
⽐如，我们可以调⽤document.body.appendChild(node)往body节点上添加⼀个元素，调⽤该API之
后会引发⼀系列的连锁反应。⾸先渲染引擎会将node节点添加到body节点之上，然后触发样式计算、布
局、绘制、栅格化、合成等任务，我们把这⼀过程称为重排重排。除了重排之外，还有可能引起重绘重绘或者合成合成操
作，形象地理解就是“牵⼀发⽽动全⾝牵⼀发⽽动全⾝”。另外，对于DOM的不当操作还有可能引发强制同步布局强制同步布局和布局布局
抖动抖动的问题，这些操作都会⼤⼤降低渲染效率。因此，对于DOM的操作我们时刻都需要⾮常⼩⼼谨慎。
当然，对于简单的⻚⾯来说，其DOM结构还是⽐较简单的，所以以上这些操作DOM的问题并不会对⽤⼾体
验产⽣太多影响。但是对于⼀些复杂的⻚⾯或者⽬前使⽤⾮常多的单⻚应⽤来说，其DOM结构是⾮常复杂
的，⽽且还需要不断地去修改DOM树，每次操作DOM渲染引擎都需要进⾏重排、重绘或者合成等操作，因
为DOM结构复杂，所⽣成的⻚⾯结构也会很复杂，对于这些复杂的⻚⾯，执⾏⼀次重排或者重绘操作都是
⾮常耗时的，这就给我们带来了真正的性能问题。
所以我们需要有⼀种⽅式来减少JavaScript对DOM的操作，这时候虚拟DOM就上场了。
什么是虚拟DOM什么是虚拟DOM
在谈论什么是虚拟DOM之前，我们先来看看虚拟DOM到底要解决哪些事情。
基于以上三点，我们再来看看什么是虚拟DOM。为了直观理解，你可以参考下图：
将⻚⾯改变的内容应⽤到虚拟DOM上，⽽不是直接应⽤到DOM上。
变化被应⽤到虚拟DOM上时，虚拟DOM并不急着去渲染⻚⾯，⽽仅仅是调整虚拟DOM的内部状态，这样
操作虚拟DOM的代价就变得⾮常轻了。
在虚拟DOM收集到⾜够的改变时，再把这些变化⼀次性应⽤到真实的DOM上。
评论0