什么是虚拟DOM

真实DOM和虚拟DOM的区别

虚拟DOM是当下两个主流框架vue和react使用到的技术，它到底有什么优缺点可以让两大主流框架所青睐呢？
在了解虚拟DOM之前，我们先了解什么是DOM

    DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

上面的解释来源于mdn，看起来很高大上，也很难懂？嗯，官方文档嘛，总归是有些晦涩难懂的？我个人的理解就是DOM是一个js对象，用于操作页面上面的元素。

    DOM用于操作页面上的元素，那么虚拟DOM当然也是用于操作页面上的元素，从字面上来理解，就是
    一个假的DOM，但它同时也是一个可以代替DOM树的一个普通js对象，所以它也包含真实DOM的特性，例如：标签名、标签上的属性、事件监听、子元素等等

既然已经存在DOM对象了，为什么大家还会使用虚拟DOM来代替DOM呢？它有什么优点呢？

    能减少不必要的 DOM 操作，如果你要添加1000个节点，真实DOM会一个一个的替你增加，但是虚拟DOM可以将多次操作合并为一次操作，减少DOM操作的频率，如果在1000个节点中，只有100个是新增的话，那么虚拟DOM也只会操作新增的这100个，这是通过虚拟DOM的diff算法实现的。
    跨平台渲染，由于虚拟DOM实际上还是一个JS对象，所以它也具有跨平台性，不仅可以用于代替DOM，也可以变成小程序，IOS应用，安卓应用。

虚拟DOM和真实DOM的速度对比，没有什么会比直接操作DOM速度更快的，但是DOM操作速度快，但是浏览器渲染却十分耗时，因为它是一个板凳一个钉子的去进行操作元素，浏览器也需要一个板凳一个钉子的去渲染页面，而虚拟DOM通过减少操作频率从而减少浏览器的渲染时间，所以在这种情况下，虚拟DOM的速度其实是高于真实DOM的，但是操作数量十分庞大时，虚拟DOM的速度也会没有真实DOM快。
所以我们可以得到一个结论

    当操作数量十分庞大时，可以选择DOM操作，数量一般时，则可以选择虚拟DOM

上面说了那么所虚拟DOM的优点，那么，虚拟DOM有缺点吗？
当然是有的，虚拟DOM需要额外的创建函数，如react中的createElement和vue中的h函数，vue通过vue-loader，react通过babel来解决这个问题，解决了这个问题的同时也造成了对第三方打包工具的依赖性。