现代前端为什么要使用虚拟DOM

一、虚拟DOM与DOM的区别

1.   仅仅修改虚拟DOM中内容，不会带来页面的排版与重绘操作。在完成虚拟DOM修改后，进行真实DOM的修改，才会使页面重绘。
2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
3. 真实的DOM中，过多的内容修改，会带来多次的页面重绘，极大的损耗页面的性能。而在使用虚拟DOM时，不管一次修改了多少内容，最后只会发生一次页面的重绘，大大的提高了页面的性能。

二、虚拟DOM的优势

    Virtual DOM是对DOM的抽象,本质上是JavaScript对象

• 1. 首先，前端性能优化的一个秘诀就是尽可能少地操作DOM，DOM相对较慢，而且频繁变动DOM会造成浏览器的回流或者重绘，这些都是性能的杀手，因此我们需要这一层抽象，在patch（绘制）过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。
• 2. 其次，现代前端框架的一个基本要求就是无须手动操作DOM，不仅因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，而且省略手动DOM操作可以大大提高开发效率。