1、虚拟DOM与真实DOM的区别
- 虚拟DOM不会进行排版与重绘操作 虚拟DOM就是把真实DOM转换为Javascript代码（更新了虚拟dom，页面不会变，更新了真是的dom，页面才会更新）
- 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
- 真实DOM频繁排版与重绘的效率是相当低的
- 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部
- 使用虚拟DOM的损耗计算：
总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘 - 直接使用真实DOM的损耗计算： 总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘
总结：一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作
2、 diff算法
首先进行总结
- diff算法的本质是找出两个对象之间的差异
- diff算法的核心是子节点数组对比，思路是通过首尾两端对比
- key的作用主要是
决定节点是否可以复用
建立key-index的索引，主要是替代遍历，提升性能。
diff算法的作用
渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。
diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用。
此处说到的对象，指的其实就是vue中的virtual dom（虚拟dom树），即使用js对象来表示页面中的dom结构。