DOM-diff是面试题当中经常遇到的一个考点,也可以说是vue和react里面的精华所在之一。
那么这篇文章我想通俗易懂的方式简单的解答一下整个过程。
要知道dom-diff 就要先知道虚拟dom
1.为什么说是数据驱动页面?
我们都知道vue和react都是用数据驱动页面的应用,那么他的原理到底是?
答:由于dom流式布局的原因,平常我们操作一次dom就要重新布局一次,所以vue和react推出的数据驱动页面的操作,就是创建一个虚拟的dom对象,所有的操作都只是修改这个虚拟dom,最后再一起进行布局,从而减少dom渲染的次数。
虚拟dom大致长这样:
{
type:’节点类型‘, //ul,div,li,text等等
children:[], //当前节点包含的子节点集合,内部结构也是虚拟DOM节点组成的数组
props:{}, //属性键值对
}
创建一个下图的dom 通过createElement,appendChild实现的代码大概如下
let virtualDom1 = createElement('ul', { class: 'list'}, [
createElement('li', { class: 'item', ['a']}),
createElement('li', { class: 'item', ['b']}),
createElement('li', { class: 'item', ['c']}),
])
那么虚拟dom对象和虚拟dom转换成真实dom的方式我们知道了,这个diff又是什么?
答:当虚拟dom比较庞大时,在只修改了一点点的情况就要重新渲染整个dom,会非常耗性能,diff算法就是对比新修改的虚拟dom的不同点,只针对不同点进行修改,从而减少性能消耗。
DOM-DIFF就是一种比较算法,比较两个虚拟DOM的区别,也就是比较两个对象的区别。
也有真实DOM与虚拟DOM的比较,不过我们这里先只讨论虚拟DOM之间的比较。
DOM-DIFF的过程
DOM-DIFF作用是通过js层面的计算,根据两个虚拟对象创建出差异的补丁对象patch,用来描述改变了哪些内容,然后用特定的操作解析patch对象,更新dom完成页面的重新渲染。
那我们按照下图的变更来实现一个DOM-diff的过程:
大致就是这么个对方算法操作 详细深入可以看这篇文章diff算法的步骤详解
我们了解diff后,在深入点,问你diff里面用的算法?该怎么答?
答:diff算法的基本算法就是用了最长上升子序列这个算法,涉及了算法题的范畴了,但多懂一点是好事:详细参考:最长上升子序列详解