第十一章 快速diff算法

202 阅读1分钟
  1. 快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 中的预处理思路,先处理新旧两组子节点中相同的前置节点和相同的后置节点。
  2. 当前置节点和后置节点全部处理完毕后,如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新,则需要根据节点的索引关系,构造出一个最长递增子序列。最长递增子序列所指向的节点即为不需要移动的节点。

前置处理: 从新旧节点两端查找相同key的节点,找不到则停止,

  • 若newEnd > oldEnd,则说明要挂载部分新元素(j~newEnd), 下图: diff-08-0.jpeg
  • 若newEnd < oldEnd,则说明要卸载部分新元素(j~newEnd), 下图: diff-26-1.jpeg
  • 构造source数组, 存放oldChilden索引在newChilden中的顺序, 默认值为-1: diff-26-2.jpeg
  • 记录完成后结果如下图:如果结果还是-1, 说明是新增元素,要挂载 diff-26-3.jpeg
  • 新旧vnode的索引对比 diff-26-4.jpeg
  • 找到最长递增子序列的索引列表,然后开始对比移动: diff-26-5.jpeg diff-26-6.jpeg
  • 首先指针i 指向的元素 和 seq[s]进行对比,
  • 如果seq[s] === i , 则说明不需要移动, 否则就需要移动或新增
  • 如果seq[s] !== i, 且 i === -1, 说明oldChild没找到对应的项,则需新增
  • 如果seq[s] !== i, 且 i !== -1, 则直接将i指向的元素,出入到 seq[s]执行的元素下面,即可完成移动 diff-26-7.jpeg

diff-26-8.jpeg