深入剖析虚拟DOM提升性能（Vue，React）；

I.原始渲染方式（直接操作DOM）：

1.state数据；

2.JSX模板；

3.数据 + 模板 相结合，生成真实的DOM来显示；

4.state发生改变；

5.数据 + 模板结合，生成真实的DOM来显示，替换上一个模板；

II.原始渲染方式改良方案（比对之后再操作DOM）：

1.state数据；

2.JSX模板；

3.数据 + 模板结合，生成真实的DOM来显示；

4.state发生改变；

5.数据 + 模板结合，生成真实的DOM，并不直接替换原来的DOM；

6.新的DOM和原始DOM做比对，找差异，找出相应的改变的地方，如只有span的内容发生了改变；

7.只用新的DOM中span元素，替换掉老的DOM中的span元素；

III.以React DOM渲染过程为例剖析虚拟DOM是如何提升性能的（操作虚拟DOM）：

1.state数据；

2.JSX模板；

3.数据 + 模板组合，生成虚拟DOM，其实也就是生成一个JS对象，用它来描述真实DOM；

举个栗子，数据 + 模板组合，生成了如下的 JS 对象：（微损耗性能）；

　

4.用虚拟DOM的结构生成真实的DOM，来显示：

5.state发生变化；

6.数据  + 模板生成新的虚拟DOM  （极大的提升性能）

举个栗子，state 改变了span里面的内容，把 hello world 替换成了 you are so cute，则生成了如下的 JS 对象：

7.比较第3点生成的虚拟DOM和新的第6点生成的虚拟DOM，发现是span标签中内容发生了改变；（极大的提升了性能）

8.直接操作DOM，改变span中的内容；

综上三种渲染方式，我们发现I,II方法都是直接对DOM元素进行操作，而对DOM元素的直接操作极其影响性能，对性能的损耗极大，而方案III，亦即虚拟DOM的操作方案，虽然看上去步骤更为繁琐，损耗了一些性能，但因对虚拟DOM进行比对，比对完成后才会进行DOM的渲染，极大的提升了性能；综上可知，这就是虚拟DOM性能优化的关键所在；总结了一下，主要有如下两点优点：