如何理解虚拟DOM树提高效率

前面是官方解释
官网概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的说明。

而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。

什么是虚拟 dom
虚拟DOM是对应于浏览器渲染的真实DOM的；在react/vue 等技术出现之前，我们要改变页面展示的内容只能通过变量查询DOM树来找到对应的DOM节点，修改节点样式、行为或者结果，来达到更新ui的目的；
这种方式是很消耗计算资源的，因为每次找到DOM节点都要遍历DOM树；如果我们建立与DOM节点对应的DOM对象（JS对象），以对象嵌套的方式来表示 DOM 树，那么每次 dom 的更改就变成了JS 对象的属性的更改，这样一来就能查找 JS对象的属性变化要比查询 DOM 树的性能开销小

为什么DOM树的性能开销大
其实也并不是查询DOM树节点的开销大，而是（1）DOM树的实现模块和JS模块是分开的，这些跨模块通讯增加了成本，以及（2）DOM操作引起的浏览器回流和重绘，使得性能开销巨大。原本再PC端是没有问题的，PC的计算能力强，但是现在随着移动端的发展，好多的网页要在手机上运行，而手机的性能参差不齐，有时会有性能问题。

新技术是如何解决性能