虚拟DOM的理解

对虚拟DOM的理解

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

虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述，设计最初的目的就是更好的跨平台，比如node.js就没有DOM，如果实现SSR，那么一个方式就是借助虚拟DOM，以对象的形式来描述真实dom结构，最终渲染到页面。在每次数据变化前，虚拟DOM都会缓存一份，变化之时现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue或者react内部封装了diff算法，通过算法进行比较渲染。

为什么用Virtual DOM

1. 保证性能下限，在不进行手动优化的情况，也能提供过得去的性能
2. 跨平台，Virual DOM本质是JavaScript对象，可以很方便的跨平台操作，比如服务端渲染等。