一文弄懂Vue中Diff算法
snabbdow Diff算法解读
说明
diff算法算是虚拟DOM的一个核心,也是一个难点.在这块我也是陆陆续续花费了两天才整明白并把这篇博客完成.方法主要是通过看snabbdom的updateChildren函数源码,在本文尾部也贴出来了.
diff 算法的核心
diff 算法的核心是对比新旧节点的 children，更新 DOM
执行过程:
要对比两棵树的差异，可以取第一棵树的每一个节点依次和第二课树的每一个节点比较,然后对比每一次的差异,这样的时间复杂度为 O(n^3),显然这样很低效.然而在DOM 操作时很少会把一个父节点移动/更新到某一个子节点,因此只需要找同级别子节点依次比较，然后依次再找下一级别的节点比较，这样算法的时间复杂度为 O(n) .所以diff算法的核心是对比新旧节点的childern,更新DOM.为了保证真实DOM中的顺序和新节点保持一致可以用while循环对首尾节点进行对比,同时对新老节点数组的开始和结尾节点设置标记索引，循环的过程中向中间移动索引,这样既能实现排序也能减小时间复杂度.
Diff算法过程(对比同级节点)
- 当新开始节点索引<=新结束索引且当旧开始节点索引<=旧结束索引,
while循环开始- 两两节点比较，有
四种比较方式(必须按顺序):旧开始节点与新开始节点比较,如果匹配上了(key 和 sel 相同),那么旧开始节点不动.
(同时++oldStartIdx,++newStartIdx)开始下一次while循环.旧结束节点与新结束节点比较,如果匹配上了(key 和 sel 相同),那么旧结束节点不动.
(同时–oldEndIdx,–newEndIdx)开始下一次while循环.旧开始节点与新结束节点比较,如果匹配上了(key 和 sel 相同),那么把旧开始节点移动到旧结束节点的后面.(同时++oldStartIdx,–newEndIdx)开始下一次while循环.旧结束节点与新开始节点比较,如果匹配上了(key 和 sel 相同),那么把旧结束节点移动到旧开始节点的前面.
(同时–oldEndIdx,++newStartIdx)开始下一次while循环.
- 如果不是以上四种情况
- 遍历新节点，使用
新节点的 key在老节点数组中找相同节点- 如果匹配上了并且是相同节点,把该旧节点(elmToMove.elm)
移到旧开始节点的前面.
(同时++newStartIdx)开始下一次while循环. - 如果匹配上了但不是相同节点,创建该新节点并插入到
旧开始节点的前面.
(同时++newStartIdx)开始下一次while循环. - 如果没有匹配上,
创建新节点并插入到旧开始节点的前面.
(同时++newStartIdx)开始下一次while循环.
- 如果匹配上了并且是相同节点,把该旧节点(elmToMove.elm)
- 遍历新节点，使用
- 两两节点比较，有
- 当新开始节点索引>新结束索引或者当旧开始节点索引>旧结束索引,
while循环结束- 如果老节点的所有子节点先遍历完 (
oldStartIdx > oldEndIdx).说明新节点有剩余，在初始新节点中,把newStartIdx到newEndIdx中间剩余节点批量插入到旧结束节点的后面.循环结束 - 如果新节点的数组先遍历完(
newStartIdx > newEndIdx)，说明老节点有剩余，在初始旧节点中,把oldStartIdx到oldEndIdx之间剩余节点批量删除.循环结束
- 如果老节点的所有子节点先遍历完 (
分析如下节点的更新步骤
注: 这张图是我从网上copy下来的,用作diff算法的分析.如下:
- oldStartIdx = 0 ; newStartIdx = 0 ; oldEndIdx = 4, newEndIdx = 2;
- oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx条件成立进入while循环
- 先进行4种新旧节点的顺序比较:b和a,e和e.e节点匹配成功,e节点位置保持不动,索引向中间移动
(oldEndIdx = 3, newEndIdx = 1) 该步结束.此时节点顺序为:b a d f e - while循环条件成立,继续判断比较: b和a,f和b,b和b. b节点匹配成功,b移动到旧结束节点f的后面,索引向中间移动
(oldStartIdx = 1, newEndIdx = 0) 该步结束.此时节点顺序为:a d f b e - while循环条件成立,继续判断比较: a和a. a节点匹配成功,a节点位置保持不动,索引向中间移动
(oldStartIdx = 2, newStartIdx = 1) 该步结束.此时节点顺序为:a d f b e - newStartIdx>newEndIdx,while循环结束,新节点数组先遍历完成,说明老节点有剩余.
- 删除旧节点b a d f e中oldStartIdx = 2 到 oldEndIdx = 3之间对应真实DOM中的节点,也就是d和f.
- 节点更新完成.此时节点顺序为:a b e
需要注意的是,图上的标注在移动b的时候位置是错误的应该是在f的后面.
如下是DIff算法核心源码:src/snabbdom.ts
function updateChildren(parentElm: Node,oldCh: VNode[],newCh: VNode[],insertedVnodeQueue: VNodeQueue) {
let oldStartIdx = 0, newStartIdx = 0;
let oldEndIdx = oldCh.length - 1;
let oldStartVnode = oldCh[0];
let oldEndVnode = oldCh[oldEndIdx];
let newEndIdx = newCh.length - 1;
let newStartVnode = newCh[0];
let newEndVnode = newCh[newEndIdx];
let oldKeyToIdx: KeyToIndexMap | undefined;
let idxInOld: number;
let elmToMove: VNode;
let before: any;
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 索引变化后，可能会把节点设置为空
if (oldStartVnode == null) {
// 节点为空移动索引
oldStartVnode = oldCh[++oldStartIdx];
// Vnode might have been moved left
} else if (oldEndVnode == null) {
oldEndVnode = oldCh[--oldEndIdx];
} else if (newStartVnode == null) {
newStartVnode = newCh[++newStartIdx];
} else if (newEndVnode == null) {
newEndVnode = newCh[--newEndIdx];
// 比较开始和结束节点的四种情况
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// 1. 比较老开始节点和新的开始节点
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// 2. 比较老结束节点和新的结束节点
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
oldEndVnode = oldCh[--oldEndIdx];
newEndVnode = newCh[--newEndIdx];
} else if (sameVnode(oldStartVnode, newEndVnode)) {
// Vnode moved right
// 3. 比较老开始节点和新的结束节点
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldStartVnode.elm!,
api.nextSibling(oldEndVnode.elm!));
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx];
} else if (sameVnode(oldEndVnode, newStartVnode)) {
// Vnode moved left
// 4. 比较老结束节点和新的开始节点
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldEndVnode.elm!,oldStartVnode.elm!);
oldEndVnode = oldCh[--oldEndIdx];
newStartVnode = newCh[++newStartIdx];
} else {
// 开始节点和结束节点都不相同
// 使用 newStartNode 的 key 再老节点数组中找相同节点
// 先设置记录 key 和 index 的对象
if (oldKeyToIdx === undefined) {
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx,oldEndIdx);
}
// 遍历 newStartVnode, 从老的节点中找相同 key 的 oldVnode 的索引
idxInOld = oldKeyToIdx[newStartVnode.key as string];
// 如果是新的vnode
if (isUndef(idxInOld)) {
// New element
// 如果没找到，newStartNode 是新节点
// 创建元素插入 DOM 树
api.insertBefore(parentElm, createElm(newStartVnode,
insertedVnodeQueue), oldStartVnode.elm!);
// 重新给 newStartVnode 赋值，指向下一个新节点
newStartVnode = newCh[++newStartIdx];
} else {
// 如果找到相同 key 相同的老节点，记录到 elmToMove 遍历
elmToMove = oldCh[idxInOld];
if (elmToMove.sel !== newStartVnode.sel) {
// 如果新旧节点的选择器不同
// 创建新开始节点对应的 DOM 元素，插入到 DOM 树中
api.insertBefore(parentElm, createElm(newStartVnode,
insertedVnodeQueue), oldStartVnode.elm!);
} else {
// 如果相同，patchVnode()
// 把 elmToMove 对应的 DOM 元素，移动到左边
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
oldCh[idxInOld] = undefined as any; api.insertBefore(parentElm, elmToMove.elm!,
oldStartVnode.elm!);
}
// 重新给 newStartVnode 赋值，指向下一个新节点
newStartVnode = newCh[++newStartIdx];
}
}
}
// 循环结束，老节点数组先遍历完成或者新节点数组先遍历完成
if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
if (oldStartIdx > oldEndIdx) {
// 如果老节点数组先遍历完成，说明有新的节点剩余
// 把剩余的新节点都插入到右边
before = newCh[newEndIdx+1] == null ? null :newCh[newEndIdx+1].elm;
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx,insertedVnodeQueue);
} else {
// 如果新节点数组先遍历完成，说明老节点有剩余
// 批量删除老节点
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}
}
}