解释:
diff算法是通过同层的树节点进行比较的算法,避免了对树进行逐层搜索遍历,所以时间复杂只有O
DIFF算法在很多场景下都有应用,例如在vue虚拟dom渲染成真实dom的新旧vnode节点比较更新时,就用到该算法。
显著的特点:
比较只会在同层级进行,不会跨层比较
在diff比较过程中,循环从两边向中间聚拢
第一步:
vue 的虚拟 dom 渲染真实 dom 的过程中首先会对新老 VNode 的开始和结束位置进行标记:oldStartIdx、oldEndIdx、newStartIdx、newEndIdx。
第二步:
标记好节点位置之后,就开始进入到的 while 循环处理中,这里是 diff 算法的核心流程,分情况进行了新老节点的比较并移动对应的 VNode 节点。while 循环的退出条件是直到老节点或者新节点的开始位置大于结束位置。
第三步:
当 while 循环结束后,根据新老节点的数目不同,做相应的节点添加或者删除。若新节点数目大于老节点则需要把多出来的节点创建出来加入到真实 dom 中,反之若老节点数目大于新节点则需要把多出来的老节点从真实 dom 中删