[Vue&React] [2021-01-06 更新] 对虚拟DOM的理解？虚拟DOM主要做了什么？虚拟DOM本身是什么？

[jeddygong]

[jeddygong]

什么是虚拟DOM

​ 从本质上讲，Virtual Dom是一个Javascript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，将使跨平台渲染成为可能。通过事物处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能

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

​ 在vue或者react内部封装了diff算法，通过这个就是无需手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM的操作可以大大提高开发效率。

为什么要用到Virtual Dom

• 保证性能下限，在不进行手动优化的情况下，提供过得去的性能。
  • 正常页面绘制渲染的流程
    • 解析HTML —> 生成DOM —> CSSOM —> Layout —> Paint —> Compiler
  • 对比一下修改DOM时正常DOM和Virtual Dom的过程，看一下它们的重绘重排的性能消耗
    • 真实DOM：生成HTML + 重建所有的DOM元素
    • Virtual Dom: 生成vNode + DOMDiff + 必要的dom更新
  • Virtual Dom的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。
  • 记得尤大大说过：框架给你带来的保证是，你不需要手动优化的情况下，我依然可以给你提供过得去的性能。
• 跨平台
  • Virtual Dom 本质上是Javascript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等

Virtual Dom 真的比真实Dom性能好吗？

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