一,前言
上篇,diff算法-比对优化(下),主要涉及以下几个点:
- 介绍了儿子节点比较的流程
- 介绍并实现了头头、尾尾、头尾、尾头4种特殊情况比对
本篇,继续介绍 diff算法-乱序比对
二,乱序比对
1,前文回顾
之前两篇主要介绍了,在进行乱序比对前针对几种特殊情况的处理,以提升比对性能:
- 一方有儿子,一方没有儿子;
- 老的有儿子,新的没有儿子:直接将多余的老 dom 元素删除即可;
- 老的没有儿子,新的有儿子:直接将新的儿子节点放入对应的老节点中即可;
- 新老节点都有儿子时,进行头头、尾尾、头尾、尾头对比;
- 头头、尾尾、头尾、尾头均没有命中时,进行乱序比对
本篇主要介绍 diff 算法的乱序比对,目标是尽可能复用老节点,以提升渲染性能;
2,乱序比对方案
这种情况下,头头、尾尾、头尾、尾头都不相同:
理想情况下,A、B 节点是可以被复用的:
方案
以新节点为主,以老节点做参照,到老儿子集合中去找能复用的节点,再将不能复用老节点删掉;
创建映射关系
根据老儿子集合,创建一个节点 key 和索引 index 的映射关系 mapping,
用于判定节点是否可被复用:取新节点依次到老的索引列表 mapping 中查找是否存在,如果存在就复用;不存在就重新创建;
3,乱序比对过程分析
1,先比对一下头头、尾尾、头尾、尾头,没有命中:
查找 F 是否在映射关系中,不在,直接做插入操作:插入到老的头指针前面的位置
即:将 F 节点插入到 A 节点的前面,并将新的头指针向后移动:
2,再对比一下头头、尾尾、头尾、尾头,还是没有命中:
继续查找 B 是否在映射关系中,B 在映射关系中,复用 B 节点并做移动操作:将复用节点移动到头指针指向节点的前面
即:将老的 B 节点移动到 A 节点的前面,并将新的头指针向后移动:
备注:由于原来的 B 节点被移动走了,所以之前的空位置要做标记,后续指针移动至此直接跳过
3,继续比对一次头头、尾尾、头尾、尾头,这时发现头和头相同,命中了头头比对:
这时,按照头头比对的逻辑:老的头指针向后移动,新头指针也向后移动;(同理,如果这里命中了尾尾比对,就将新老尾指针都向前进行移动;)
但由于之前 B 节点已经移动到 A 节点前面了,所以老的头指针跳过原始 B 节点位置,直接移动到 C 位置:
备注:这里就使用到了之前 B 节点移动走后所做的空位置标记;
4,继续比对一次头头、尾尾、头尾、尾头,没有命中:
查找 E 是否在映射关系中,不在,直接做插入操作:插入到老的头指针前面的位置
即:将 E 节点插入到 C 节点的前面,并将新的头指针向后移动:
备注:永远是插入到老的头指针前面的位置;
5,继续比对一次头头、尾尾、头尾、尾头,没有命中:
查找 G 是否在映射关系中,不在,直接做插入操作:插入到老的头指针前面的位置;
即:将 G 节点插入到 C 节点的前面,并将新的头指针向后移动:
6,由于新儿子数组已全部比对完成,剩余的老节点直接删除即可,
依次删除“从老的头节点到老的尾节点”区域的全部节点:
所以,最终结果为 F B A E G;其中,A、B 节点实现了节点复用;
三,代码实现
1,新老节点更新示例
let render1 = compileToFunction(`<div>
<li key="A">A</li>
<li key="B">B</li>
<li key="C">C</li>
<li key="D">D</li>
</div>`);
let render2 = compileToFunction(`<div>
<li key="F" style="color:pink">F</li>
<li key="B" style="color:yellow">B</li>
<li key="A" style="color:blue">A</li>
<li key="E" style="color:red">E</li>
<li key="P" style="color:red">P</li>
</div>`);
2,创造映射关系
根据老儿子集合创建节点 key 与索引 index 的映射关系 mapping:
// src/vdom/patch.js#updateChildren#makeKeyByIndex
function updateChildren(el, oldChildren, newChildren) {
// ...
/**
* 根据children创建映射
*/
function makeKeyByIndex(children) {
let map = {}
children.forEach((item, index)=>{
map[item.key] = index;
})
console.log(map)
debugger;
return map
}
let mapping = makeKeyByIndex(oldChildren);
// ...
}
测试:
3,处理步骤
- 筛查:看新节点在老的里面是否存在,到 mapping 中去筛查;
- 没有,将当前比对的新节点插入到老的头指针对用的节点前面;
- 有,需要复用,将当前比对的老节点移动到老的头指针前面;
- 复用步骤:插入dom、patch更新属性,原位置置空,指针移动;
while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
// 当前循环开始时,先处理当前的oldStartVnode和oldEndVnode为空的情况;
// 原因:节点之前被移走时置空,直接跳过
if(!oldStartVnode){
oldStartVnode = oldChildren[++oldStartIndex];
}else if(oldEndVnode){
oldEndVnode = oldChildren[--oldEndIndex];
} else if (isSameVnode(oldStartVnode, newStartVnode)) {// 头头比较
// ...
}else if(isSameVnode(oldEndVnode, newEndVnode)){// 尾尾比较
// ...
}else if(isSameVnode(oldStartVnode, newEndVnode)){// 头尾比较
// ...
}else if(isSameVnode(oldEndVnode, newStartVnode)){// 尾头比较
// ...
}else{
// 前面4种逻辑(头头、尾尾、头尾、尾头),主要是考虑到用户使用时的一些特殊场景,但也有非特殊情况,如:乱序排序
// 筛查当前新的头指针对应的节点在mapping中是否存在
let moveIndex = mapping[newStartVnode.key]
if(moveIndex == undefined){// 没有,将当前比对的新节点插入到老的头指针对用的节点前面
// 将当前新的虚拟节点创建为真实节点,插入到老的开始节点前面
el.insertBefore(createElm(newStartVnode), oldStartVnod e.el);
}else{ // 有,需要复用
// 将当前比对的老节点移动到老的头指针前面
let moveVnode = oldChildren[moveIndex];// 从老的队列中找到可以被复用的这个节点
el.insertBefore(moveVnode.el, oldStartVnode.el);
// 复用:位置移动完成后,还要对比并更新属性
patch(moveVnode, oldStartVnode)
// 由于复用的节点在oldChildren中被移走了,之前的位置要标记为空(指针移动时,跳过会使用)
oldChildren[moveIndex] = undefined;
}
// 每次处理完成后,新节点的头指针都需要向后移动
// 备注:
// 无论节点是否可复用,新指针都会向后移动,所以最后统一处理;
// 节点可复用时,老节点的指针移动会在4种特殊情况中被处理完成;
newStartVnode = newChildren[++newStartIndex];
}
}
4,删除多余的老节点
注意:由于在新旧节点的对比时,有可能已经将部分节点移动走了,移走时置为了 undefined;
所以,此时删除多余节点时,有可能这个新老指针的区间中包含着 undefined 的节点,需要跳过对此节点的处理:
// 2,旧的多,(以旧指针为参照)删除多余的真实节点
if(oldStartIndex <= oldEndIndex){
for(let i = oldStartIndex; i <= oldEndIndex; i++){
let child = oldChildren[i];
// child有值时才删除;原因:节点有可能在移走时被置为undefined
child && el.removeChild(child.el);
}
}
5,测试乱序比对更新
更新前:
更新后:
节点更新情况:
- A 节点复用,只更新了颜色;
- F、E、G 均为新增节点;
- B 节点仅做了移动操作;
这样,就尽可能的复用了老节点;
四,结尾
本篇,diff 算法-乱序比对,主要涉及以下几个点:
- 介绍了乱序比对的方案;
- 介绍了乱序比对的过程分析;
- 实现了乱序比对的代码逻辑;
下篇,diff 算法的阶段性梳理;
维护日志:
- 20210811:
- 二级标题与排版微调;
- 修改有下次的图示和部分表达不够明确的语句;