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结构。