问题引入
- 为什么要使用diff算法?
- 什么是diff算法?
问题解释
-
为了减少DOM操作, 减少浏览器开销。
- DOM元素数量多：页面中的DOM元素非常多，每个DOM元素的状态和属性都需要被计算和更新，这就会带来很大的性能开销。
- DOM操作引起浏览器重绘和重排：当我们修改DOM元素时，会引起浏览器对页面进行重绘和重排。这个过程会耗费大量的计算资源，如果频繁地修改DOM元素，会导致页面的性能变得很差。
- JavaScript与DOM之间的交互开销大：当JavaScript代码需要操作DOM元素时，需要通过浏览器的API来完成，而这个过程涉及到JavaScript代码和浏览器引擎之间的交互，会产生一定的开销。
- DOM操作会触发页面回流：在执行一些DOM操作时，浏览器会重新计算元素的大小和位置，这个过程叫做回流(reflow)。回流会导致页面中的其他元素重新布局，从而增加页面的开销。
因此，为了提高页面性能，通过使用diff算法减少DOM操作。
-
diff算法是一种基于虚拟DOM的算法，用于比较前后两个状态下的虚拟DOM树，并计算出最小的操作来更新DOM树，以实现高效的渲染性能。
Vue2 diff算法
Vue2的diff算法采用的是基于虚拟DOM树的双端比较算法，也称为VNode的patch算法。它将新旧两棵虚拟DOM树的VNode节点进行深度优先遍历，一边遍历一边进行比较，并更新需要更新的节点，最终生成新的VNode树，然后将新的VNode树渲染成实际的DOM。
源码解析
return function patch(oldVnode, vnode) {
let isInitialPatch = false
const insertedVnodeQueue = []
// 如果新的 vnode 不存在，则销毁旧的 vnode
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
// 如果旧的 vnode 不存在，则创建新的 vnode 的 DOM 元素
if (isUndef(oldVnode)) {
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
// 判断 oldVnode 是否为真实元素
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// 更新现有的根节点
patchVnode(oldVnode, vnode, insertedVnodeQueue)
} else {
// 如果 oldVnode 是真实元素
if (isRealElement) {
// 如果是服务端渲染的内容并且可以成功合并，则进行合并
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR)
}
if (isTrue(hydrating)) {
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
} else if (__DEV__) {
warn('...')
}
}
oldVnode = emptyNodeAt(oldVnode)
}
// 替换现有元素
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
createElm(vnode, insertedVnodeQueue, oldElm._leaveCb ? null : parentElm, nodeOps.nextSibling(oldElm))
// 递归更新所有的祖先占位符节点
if (isDef(vnode.parent)) {
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
ancestor.elm = vnode.elm
if (patchable) {
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// 删除旧的节点
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
Vue3 diff算法
Vue3的diff算法基于最长递增子序列（LIS）算法进行优化，以减少 VNode 的比较次数，提高diff算法的效率。
最长递增子序列(LIS)
最长递增子序列是一个非常经典的算法问题，它的问题描述为：给定一个数列，求其中最长的一个子序列，使得子序列中的数是递增的。
function longestIncreasingSubsequence(nums) {
if (!nums.length) { // nums为空的情况
return 0;
}
const tops = []; // 堆顶集合
for (const num of nums) {
// 二分查找num应该插入的位置
let left = 0, right = tops.length - 1;
while (left <= right) {
const mid = Math.floor((left + right) / 2);
if (tops[mid] < num) {
left = mid + 1;
} else {
right = mid - 1;
}
}
// 找到第一个堆顶元素比num大的堆，更新该堆的堆顶为num
if (left < tops.length) {
tops[left] = num;
} else {
tops.push(num); // 创建新的堆
}
}
return tops.length; // 堆的数量就是最长递增子序列的长度
}
源码解析
Vue3中的diff算法将子树的比较转化为最长递增子序列问题，通过计算出新旧 children 中最长的递增子序列，来尽可能地减少比较操作。由于子树的顺序并不会对渲染结果造成影响，因此将子树的比较转化为最长递增子序列问题是可行的。
function patchKeyedChildren(
c1, // 旧子节点
c2, // 新子节点
container // 父节点容器
) {
// 初始化旧节点的开始、结束指针
let i = 0
let e1 = c1.length - 1
// 初始化新节点的开始、结束指针
let j = 0
let e2 = c2.length - 1
// Phase 1: 从头部开始遍历
while (i <= e1 && j <= e2) {
const n1 = c1[i]
const n2 = c2[j]
if (isSameVNode(n1, n2)) {
// 如果是相同节点，则直接更新
patch(n1, n2, container)
i++
j++
} else {
break
}
}
// Phase 2: 从尾部开始遍历
while (i <= e1 && j <= e2) {
const n1 = c1[e1]
const n2 = c2[e2]
if (isSameVNode(n1, n2)) {
// 如果是相同节点，则直接更新
patch(n1, n2, container)
e1--
e2--
} else {
break
}
}
// Phase 3: 旧节点和新节点之间的差异处理
if (i > e1) {
// 如果旧节点已经遍历完了, 依然有新的节点，则把新节点添加到容器中
while (j <= e2) {
// 在容器中添加新节点
const nextPos = j + 1
const anchor = nextPos < c2.length ? c2[nextPos].el : null
patch(null, c2[j], container, anchor)
j++
}
} else if (j > e2) {
// 如果新节点已经遍历完了，还有旧节点，则把旧节点从容器中删除
while (i <= e1) {
// 从容器中删除旧节点
unmount(c1[i])
i++
}
} else {
// 如果旧节点和新节点都存在，则进行diff更新
const s1 = i
const s2 = j
// 构建新子节点的key-index表
const keyToNewIndexMap = new Map()
for (let i = s2; i <= e2; i++) {
const nextChild = c2[i]
keyToNewIndexMap.set(nextChild.key, i)
}
const toBePatched = e2 - s2 + 1
// 构建旧子节点的key-index表
const newIndexToOldIndexMap = new Array(toBePatched)
for (let i = 0; i < toBePatched; i++) {
newIndexToOldIndexMap[i] = 0
}
for (let i = s1; i <= e1; i++) {
const prevChild = c1[i]
const newIndex = keyToNewIndexMap.get(prevChild.key)
// 如果新旧子节点存在对应关系，则更新节点
if (newIndex !== undefined) {
newIndexToOldIndexMap[newIndex - s2] = i + 1
patch(prevChild, c2[newIndex], container)
// 如果旧节点和新节点都存在，则进行diff更新
const s1 = i
const s2 = j
// 构建新子节点的key-index表
const keyToNewIndexMap = new Map()
for (let i = s2; i <= e2; i++) {
const nextChild = c2[i]
keyToNewIndexMap.set(nextChild.key, i)
}
const toBePatched = e2 - s2 + 1
// 构建旧子节点的key-index表
const newIndexToOldIndexMap = new Array(toBePatched)
for (let i = 0; i < toBePatched; i++) {
newIndexToOldIndexMap[i] = 0
}
for (let i = s1; i <= e1; i++) {
const prevChild = c1[i]
const newIndex = keyToNewIndexMap.get(prevChild.key)
// 如果新旧子节点存在对应关系，则更新节点
if (newIndex !== undefined) {
newIndexToOldIndexMap[newIndex - s2] = i + 1
patch(prevChild, c2[newIndex], container)
} else {
// 如果新旧子节点不存在对应关系，则删除旧节点
unmount(prevChild)
}
}
// 构建key-index表
const increasingNewIndexSequence = getSequence(newIndexToOldIndexMap)
let j = increasingNewIndexSequence.length - 1
// 倒序遍历新子节点，从后往前添加新节点
for (let i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i
const nextChild = c2[nextIndex]
const anchor = nextIndex + 1 < c2.length ? c2[nextIndex + 1].el : null
if (newIndexToOldIndexMap[i] === 0) {
// 如果新节点在旧节点中不存在对应关系，则添加新节点
patch(null, nextChild, container, anchor)
} else if (j < 0 || i !== increasingNewIndexSequence[j]) {
// 如果新节点在旧节点中存在对应关系，但位置不正确，则移动节点
move(nextChild, container, anchor)
} else {
// 如果新节点在旧节点中存在对应关系，并且位置正确，则更新位置指针
j--
}
}
}
}
总结
Vue2 和 Vue3 的 diff 算法虽然都采用了双端比较的方式，但是它们的最大差异在于 Vue3 引入了基于动态规划的优化方案，从而在性能方面有了很大的提升。
Vue2 的 diff 算法是采用递归的方式进行遍历的，对于每个节点的比较都需要递归处理其子节点，从而会出现很多重复计算的情况，导致性能较低。而 Vue3 的 diff 算法采用了基于动态规划的优化方案，将比较过程分成了两个阶段，即首先计算出最长递增子序列（LIS），然后根据 LIS 的结果进行节点的移动和插入操作，从而避免了重复计算和重复操作的问题，从而提高了性能。
