虚拟DOM 总结

什么是虚拟DOM？

虚拟 DOM 是一个 javascript 对象，通过这个 javascript 对象来描述真实的 DOM 。（虚拟DOM ：用 javascript 模拟真实的 DOM 结构 ）

为啥真实DOM操作不推荐？

真实DOM的操作，一般都会对某块元素的整体重新渲染。

为啥虚拟DOM能提升性能

当使用虚拟DOM时，在数据发生变化的时候，会对比前后差异，只需要局部刷新变化的位置就好了。

https://segmentfault.com/a/1190000020733831

1. 虚拟DOM不会进行排版与重绘操作（因为虚拟DOM是一个js描述DOM的对象）
2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
3. 真实DOM频繁排版与重绘的效率是相当低的
4. 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）
5. 使用虚拟DOM的损耗计算：
总损耗=虚拟DOM增删改+（与Diff算法效率有关）真实DOM差异增删改+（较少的节点）排版与重绘
6. 直接使用真实DOM的损耗计算：
总损耗=真实DOM完全增删改+（可能较多的节点）排版与重绘
总之，一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作。