虚拟dom和real dom区别

Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构，

Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。

区别：

1. 虚拟DOM不会进行排版与重绘操作

2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

3. 真实DOM频繁排版与重绘的效率是相当低的

4. 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）

使用虚拟DOM的损耗计算：

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘

直接使用真实DOM的损耗计算：

总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘

 

优缺点

真实DOM的

　　优势：易用

　　缺点：

         效率低，解析速度慢，内存占用量过高

         性能差：频繁操作真实DOM，易于导致重绘与回流

使用虚拟DOM的

 优势如下：

    简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难

   性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能

    跨平台：React借助虚拟DOM， 带来了跨平台的能力，一套代码多端运行

  缺点：

   在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化

  首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢

总之，一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作