真实DOM，就是文档对象类型，在页面上渲染的每一个节点都是一个真实DOM结构。

虚拟DOM，就是一个描述描述DOM结构的对象。

在创建虚拟DOM的目的就是为了更好将虚拟节点渲染到页面上，虚拟DOM对象的节点与真实DOM的属性是一一对应的。

在React中，ReactDOM.render()函数将虚拟DOM节点插入到真实DOM节点上，并且渲染到页面上。

虚拟DOM和真实DOM的区别：

  1. 虚拟DOM不会进行重排和重绘，操作真实DOM的时候，会频繁触发重排和重绘；
  2. 虚拟DOM的总消耗性能为：虚拟DOM的增删改、真实DOM差异增删改和重排重绘；真实DOM性能消耗为真实DOM增删改加上重排重绘；

如果是原生JavaScript来操作DOM，浏览器会从构建DOM开始，从头到尾执行一遍流程。比如在操作一次，需要更新10个DOM节点，那么浏览器会执行10次流程。

然而通过虚拟DOM来完成的话，同样的更新10个节点，虚拟DOM不会马上操作DOM，而是把10次更新的diff内容保存在本地内存的一个js对象上，最后才把这个js对象转化为真实DOM。

虚拟DOM与真实DOM的优缺点：

真实DOM容易理解，但是开发效率低，体验差；

虚拟DOM是使用，提升了开发效率和体验，同时实现跨平台能力，一套代码多端运行。缺点是在一些性能要求极高的应用中，虚拟DOM无法进行针对性的优化。