react.js中的虚拟dom与真实dom有什么区别？为什么说虚拟dom比较快？

react.js在我们现在的前端开发应用非常广泛，而在前端面试中也常有这样的题目：虚拟dom与真实dom有什么区别？如果你很快答上来它们之间的区别，那么下一个问题就是：为什么说虚拟dom比较快？
好的，就算你知道了它内部的差异运算，那为什么它就比较快呢？我们一一来分析一下。

虚拟dom与真实dom有什么区别

虚拟dom	真实dom
更新的更快	更新的较慢
不能直接更新html	可以直接更新html
dom操作非常便利	dom操作非常昂贵
内存无浪费	内存浪费严重

以上就是虚拟dom与真实dom的比较与区别，可以看出来，采用虚拟dom的方式，可以大大提升渲染的效率。那么，通过上面的对比，我们得出了结论，但是，我们再深入一步理解：为什么操作真实的dom是昂贵的？

真实dom操作带来的问题

更改虚拟DOM与更改真实DOM应该没有太大的不同。

 问题出现在结果中:操作真实DOM中，会触发页面的回流与重绘，
 而这两个东西是非常耗费性能的。因此我们越少操作真实dom就越好。

模板渲染的一种方法是，把需要渲染的模板计算好，然后用渲染好的模板替换整个容器元素。这需要重新计算容器中出现的所有内容，以及受其影响的所有内容。所以想像一个，假设你的浏览器是你的厨房，你只是买了个柠檬回了，但浏览器把你把有的东西全部扔掉，然后再弄一批一样的回来，而只是因为新的这批货里带了一个柠檬？你会疯掉的。

事实上，react.js和很多其它的js框架一样，都是通过计算最小变化量进行替换。

值得注意的是，虚拟dom并没有比getElementById这样的方式来得更快，如果仅仅是一个元素，那么后者还是最快的，但是，当我们需要同时更新大量数据的时候，虚拟dom就是一个更快的选择了。