vuejs 设计与实现 - 双端diff算法

我们介绍了简单 Diff 算法的实现原理。简单 Diff 算法利用虚拟节点的 key 属性，尽可能地复用 DOM元素，并通过移动 DOM的方式来完成更新，从而减少不断地创建和销毁 DOM 元素带来的性能开销。但是，简单 Diff 算法仍然存在很多缺陷，这些缺陷可以通过本章将要介绍的双端 Diff 算法解决。

1.双端比较的原理

双端 Diff 算法是一种同时对新旧两组子节点的两个端点进行比较的算法。因此，我们需要四个索引值，分别指向新旧两组子节点的端点.如下图：

请添加图片描述

双端比较的方式：

请添加图片描述
在双端比较中，每一轮比较都分为四个步骤，如图 10-5 中的连线所示。
比较的过程如下描述：
第一步: 比较旧的一组子节点中的第一个子节点 p-1 与新的一组子节点中的第一个子节点 p-4，看看它们是否相同。由于两者的key 值不同，因此不相同，不可复用，于是什么都不做。

第二步:比较旧的一组子节点中的最后一个子节点 p-4 与新的一组子节点中的最后一个子节点 p-3，看看它们是否相同。由于两者的 key 值不同，因此不相同，不可复用，于是什么都不做。

第三步:比较旧的一组子节点中的第一个子节点 p-1 与新的一组子节点中的最后一个子节点 p-3，看看它们是否相同。由于两者的 key 值不同，因此不相同，不可复用，于是什么都不做。

第四步:比较旧的一组子节点中的最后一个子节点 p-4 与新的一组子节点中的第一个子节点 p-4。由于它们的 key 值相同，因此可以进行 DOM 复用。
请添加图片描述

 function patchChildren(n1, n2, container) {
   patchKeyedChildren(n1, n2, container)
}

function patchKeyedChildren(n1, n2, container){
   const oldChildren = n1.children 
   const newChildren = n2.children

   // 四个索引值
   let oldStartIdx = 0
   let oldEndIdx = oldChildren.length - 1

   let newStartIdx = 0
   let newEndIdx = newChildren.length - 1

   // 四个索引指向的 vnode 节点
   let oldStartVNode = oldChildren[oldStartIdx]
   let oldEndVNode = oldChildren[oldEndIdx]

   let newStartVNode = newChildren[newStartIdx]
   let newEndVNode = newChildren[newEndIdx]


   if (oldStartVNode.key === newStartVNode.key) {
        // 步骤一:oldStartVNode 和 newStartVNode 比较

    } else if (oldEndVNode.key === newEndVNode.key) {
        // 步骤二:oldEndVNode 和 newEndVNode 比较
     
    } else if(oldStartVNode.key === newEndVNode.key) {
        // 步骤三:oldStartVNode 和 newEndVNode 比较
       


    } else if (oldEndVNode.key === newStartVNode.key) {
        // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
        // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
        // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。


        // 第四步:oldEndVNode 和 newStartVNode 比较
        // 仍然需要调用 patch 函数进行打补丁
        patch(oldEndVNode, newStartVNode, container)

        // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
        insert(oldEndVNode.el, container, oldStartVNode.el)
        
        // 移动 DOM 完成后，更新索引值，指向下一个位置
        oldEndVNode = oldChildren[--oldEndIdx]
        newStartVNode = newChildren[++newStartIdx]
    }


}

第一轮 DOM 移动操作完成 态状的点节后，新旧两组子节点以及真实 DOM 节点的状态如下：
请添加图片描述

此时，真实 DOM 节点顺序为 p-4、p-1、p-2、p-3，这与新的 一组子节点顺序不一致。这是因为diff算法还没结束，还需要进行下一轮更新。因此，我们需要将更新逻辑封装到一个 while 循环中，

function patchChildren(n1, n2, container) {
            patchKeyedChildren(n1, n2, container)
        }

        function patchKeyedChildren(n1, n2, container){
            const oldChildren = n1.children 
            const newChildren = n2.children

            // 四个索引值
            let oldStartIdx = 0
            let oldEndIdx = oldChildren.length - 1

            let newStartIdx = 0
            let newEndIdx = newChildren.length - 1

            // 四个索引指向的 vnode 节点
            let oldStartVNode = oldChildren[oldStartIdx]
            let oldEndVNode = oldChildren[oldEndIdx]

            let newStartVNode = newChildren[newStartIdx]
            let newEndVNode = newChildren[newEndIdx]

 +           while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                 
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
                   

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }
 +           }


        }

由于在每一轮更新完成之后，紧接着都会更新四个索引中与当前更新轮次相关联的索引，所以整个 while 循环执行的条件是:头部索引值要小于等于尾部索引值。

在第一轮更新结束后循环条件仍然成立，因此需要进行下一轮的比较：

第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-2，看看它们是否相同。由于两者的 key 值不
同，不可复用，所以什么都不做。

这里，我们使用了新的名词: 。它指的是头部索引oldStartIdx 和 newStartIdx 所指向的节点。

第二步:比较旧的一组子节点中的尾部节点 p-3 与新的一组子节点中的尾部节点 p-3，两者的 key 值相同，可以复用。另外，由于两者都处于尾部，因此不需要对真实 DOM 进行移动操作，只需要打补丁即可:


function patchChildren(n1, n2, container) {
            patchKeyedChildren(n1, n2, container)
        }

        function patchKeyedChildren(n1, n2, container){
            const oldChildren = n1.children 
            const newChildren = n2.children

            // 四个索引值
            let oldStartIdx = 0
            let oldEndIdx = oldChildren.length - 1

            let newStartIdx = 0
            let newEndIdx = newChildren.length - 1

            // 四个索引指向的 vnode 节点
            let oldStartVNode = oldChildren[oldStartIdx]
            let oldEndVNode = oldChildren[oldEndIdx]

            let newStartVNode = newChildren[newStartIdx]
            let newEndVNode = newChildren[newEndIdx]

            while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
      +              patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
       +             oldEndVNode = oldChildren[--oldEndIdx]
       +             newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }
            }


        }

请添加图片描述
真实 DOM 的顺序相比上一轮没有变化，因为在这一轮的比较中没有对 DOM 节点进行移动，只是对 p-3 节点打补丁。接下来，我们再根据图 上图所示的状态执行下一轮的比较：

第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-2，看看它们是否相同。由于两者的 key 值不
同，不可复用，因此什么都不做。

第二步:比较旧的一组子节点中的尾部节点 p-2 与新的一组子节点中的尾部节点 p-1，看看它们是否相同，由于两者的 key 值不
同，不可复用，因此什么都不做。

第三步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的尾部节点 p-1。两者的 key 值相同，可以复用。

在第三步的比较中，我们找到了相同的节点，这说明: p-1原本是头部节点，但是在新的顺序中，它变成了尾部节点。因此，我们需要将节点p-1对应的真实 DOM 移动到旧的一组子节点的尾部节点 p-2 所对应的真实 DOM 后面，同时还需要更新相应的索引到下一个位置，如图 下图所示：
请添加图片描述

function patchChildren(n1, n2, container) {
            patchKeyedChildren(n1, n2, container)
        }

        function patchKeyedChildren(n1, n2, container){
            const oldChildren = n1.children 
            const newChildren = n2.children

            // 四个索引值
            let oldStartIdx = 0
            let oldEndIdx = oldChildren.length - 1

            let newStartIdx = 0
            let newEndIdx = newChildren.length - 1

            // 四个索引指向的 vnode 节点
            let oldStartVNode = oldChildren[oldStartIdx]
            let oldEndVNode = oldChildren[oldEndIdx]

            let newStartVNode = newChildren[newStartIdx]
            let newEndVNode = newChildren[newEndIdx]

            while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
                    // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
                   
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
                    patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
       +             patch(oldStartVNode, newEndVNode, container)
       +             insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

       +             oldStartVNode = oldChildren[++oldStartIdx]
       +             newEndVNode = newChildren[--newEndIdx]

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }
            }


        }

下一轮循环：
第一步:比较旧的一组子节点中的头部节点 p-2 与新的一组 子节点中的头部节点 p-2。发现两者 key 值相同，可以复用。但 两者在新旧两组子节点中都是头部节点，因此不需要移动，只需 要调用 patch 函数进行打补丁即可。

function patchChildren(n1, n2, container) {
            patchKeyedChildren(n1, n2, container)
        }

        function patchKeyedChildren(n1, n2, container){
            const oldChildren = n1.children 
            const newChildren = n2.children

            // 四个索引值
            let oldStartIdx = 0
            let oldEndIdx = oldChildren.length - 1

            let newStartIdx = 0
            let newEndIdx = newChildren.length - 1

            // 四个索引指向的 vnode 节点
            let oldStartVNode = oldChildren[oldStartIdx]
            let oldEndVNode = oldChildren[oldEndIdx]

            let newStartVNode = newChildren[newStartIdx]
            let newEndVNode = newChildren[newEndIdx]

            while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
                    // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
   +                 patch(oldStartVNode, newStartVNode, container)
                    // 更新相关索引，指向下一个位置
   +                 oldStartVNode = oldChildren[++oldStartIdx]
   +                 newStartVNode = newChildren[++newStartIdx]
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
                    patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
                    patch(oldStartVNode, newEndVNode, container)
                    insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

                    oldStartVNode = oldChildren[++oldStartIdx]
                    newEndVNode = newChildren[--newEndIdx]

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }
            }


        }

在这一轮更新之后，新旧两组子节点与真实 DOM 节点的状态如图下图 10-10 所示。

请添加图片描述

双端比较的优势

优势：减少移动操作。

案例分析：如下图的新旧两组子节点：
请添加图片描述

简单diff：移动两次
请添加图片描述

双端diff：移动一次

请添加图片描述

非理想状态的处理方式

第一轮都无法命中：

  • 旧的一组子节点:p-1、p-2、p-3、p-4。
  • 新的一组子节点:p-2、p-4、p-1、p-3。

当我们尝试按照双端 Diff 算法的思路进行第一轮比较时，会发现无法命中四个步骤中的任何一步。这个时候怎么办呢？这时，我们只能通过增加额外的处理步骤来处理这种非理想情况。既然两个头部和两个尾部的四个节点中都没有可复用的节点，那么我们就尝试看看非头部、非尾部的节点能否复用。具体做法是，拿新的一组子节点中的头部节点去旧的一组子节点中寻找：如下面的代码：

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
                    // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
                    patch(oldStartVNode, newStartVNode, container)
                    // 更新相关索引，指向下一个位置
                    oldStartVNode = oldChildren[++oldStartIdx]
                    newStartVNode = newChildren[++newStartIdx]
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
                    patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
                    patch(oldStartVNode, newEndVNode, container)
                    insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

                    oldStartVNode = oldChildren[++oldStartIdx]
                    newEndVNode = newChildren[--newEndIdx]

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                } else {
+					// 处理非理想情况

                    // 在旧的一 组子节点中，找到与新的一组子节点的头部节点具有相同 key 值的节点
                    // 遍历旧的一组子节点，试图寻找与 newStartVNode 拥有相同 key 值的节点
                    // idxInOld 就是新的一组子节点的头部节点在旧的一组子节点中的索引
 +                   const idxInOld = oldChildren.findIndex(node => node.key === newStartVNode.key)
				}
            }

如下图在旧子节点中寻找可复用节点：
请添加图片描述

function patchChildren(n1, n2, container) {
            patchKeyedChildren(n1, n2, container)
        }

        function patchKeyedChildren(n1, n2, container){
            const oldChildren = n1.children 
            const newChildren = n2.children

            // 四个索引值
            let oldStartIdx = 0
            let oldEndIdx = oldChildren.length - 1

            let newStartIdx = 0
            let newEndIdx = newChildren.length - 1

            // 四个索引指向的 vnode 节点
            let oldStartVNode = oldChildren[oldStartIdx]
            let oldEndVNode = oldChildren[oldEndIdx]

            let newStartVNode = newChildren[newStartIdx]
            let newEndVNode = newChildren[newEndIdx]

            while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

                if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
                    // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
                    patch(oldStartVNode, newStartVNode, container)
                    // 更新相关索引，指向下一个位置
                    oldStartVNode = oldChildren[++oldStartIdx]
                    newStartVNode = newChildren[++newStartIdx]
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
                    patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
                    patch(oldStartVNode, newEndVNode, container)
                    insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

                    oldStartVNode = oldChildren[++oldStartIdx]
                    newEndVNode = newChildren[--newEndIdx]

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }  else {
                    // 处理非理想情况

                    // 在旧的一 组子节点中，找到与新的一组子节点的头部节点具有相同 key 值的节点
                    // 遍历旧的一组子节点，试图寻找与 newStartVNode 拥有相同 key 值的节点
                    // idxInOld 就是新的一组子节点的头部节点在旧的一组子节点中的索引
                    const idxInOld = oldChildren.findIndex(node => node.key === newStartVNode.key)

                    // idxInOld 大于 0，说明找到了可复用的节点，并且需要将其对应的真实DOM 移动到头部
 +                   if(idxInOld > 0) {
 +                       // idxInOld 位置对应的 vnode 就是需要移动的节点
                        const vnodeToMove = oldChildren[idxInOld]
                        
                        // 不要忘记除移动操作外还应该打补丁
 +                       patch(vnodeToMove, newStartVNode, container)

                        // 将 vnodeToMove.el 移动到头部节点 oldStartVNode.el 之前，因此使用后者作为锚点
+                        insert(vnodeToMove.el, container, oldStartVNode.el)

                        // 由于位置 idxInOld 处的节点所对应的真实 DOM 已经移动到了别处，因此将其设置为 undefined
 +                       oldChildren[idxInOld] = undefined
                        
                        // 最后更新 newStartIdx 到下一个位置
 +                       newStartVNode = newChildren[++newStartIdx]
                    }
                }
            }


        }

在上面这段代码中，首先判断 idxInOld 是否大于 0。如果条件 成立，则说明找到了可复用的节点，然后将该节点对应的真实 DOM 移 动到头部。为此，我们先要获取需要移动的节点，这里的 oldChildren[idxInOld] 所指向的节点就是需要移动的节点。在移 动节点之前，不要忘记调用 patch 函数进行打补丁。接着，调用 insert 函数，并以现在的头部节点对应的真实 DOM 节点 oldStartVNode.el 作为锚点参数来完成节点的移动操作。当节点移 动完成后，还有两步工作需要做：

    1. 由于处于 idxInOld 处的节点已经处理过了(对应的真实 DOM 移到了别处)，因此我们应该将 oldChildren[idxInOld] 设 置为undefined。
    1. 新的一组子节点中的头部节点已经处理完毕，因此将 newStartIdx 前进到下一个位置。

经过上述两个步骤的操作后，新旧两组子节点以及真实 DOM 节点 的状态如图 下图所示：
请添加图片描述
此时，真实 DOM 的顺序为:p-2、p-1、p-3、p-4。接着，双端 Diff 算法会继续进行。如下图所示：
请添加图片描述

第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-4，两者 key 值不同，不可复用。
第二步:比较旧的一组子节点中的尾部节点 p-4 与新的一组子节点中的尾部节点 p-3，两者 key 值不同，不可复用。
第三步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的尾部节点 p-3，两者 key 值不同，不可复用。
第四步:比较旧的一组子节点中的尾部节点 p-4 与新的一组子节点中的头部节点 p-4，两者的 key 值相同，可以复用。

在这一轮比较的第四步中，我们找到了可复用的节点。因此，按照双端 Diff 算法的逻辑移动真实 DOM，即把节点 p-4 对应的真实DOM 移动到旧的一组子节点中头部节点 p-1 所对应的真实 DOM 前面，如图 下图 所示：

请添加图片描述

此时，真实 DOM 节点的顺序是:p-2、p-4、p-1、p-3。接着，开始下一轮的比较：
第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-1，两者的 key 值相同，可以复用。

在这一轮比较中，第一步就找到了可复用的节点。由于两者都处于头部，所以不需要对真实 DOM 进行移动，只需要打补丁即可。在这一步操作过后，新旧两组子节点与真实 DOM 节点的状态如图 下图 所示：
请添加图片描述

此时，真实 DOM 节点的顺序是:p-2、p-4、p-1、p-3。接着，进行下一轮的比较。需要注意的一点是，此时旧的一组子节点的
头部节点是 undefined。这说明该节点已经被处理过了，因此不需要再处理它了，直接跳过即可。为此，我们需要补充这部分逻辑的代码，具体实现如下:

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

	// 增加两个判断分支，如果头尾部节点为 undefined，则说明该节点已经被处理过了，直接跳到下一个位置
   + if (!oldStartVNode) {
   +     oldStartVNode = oldChildren[++oldStartIdx]
   + } else if (!oldEndVNode) {
   + 	 oldEndVNode = oldChildren[--oldEndIdx]
   + }else if (oldStartVNode.key === newStartVNode.key) {
        // 步骤一:oldStartVNode 和 newStartVNode 比较
        // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
        patch(oldStartVNode, newStartVNode, container)
        // 更新相关索引，指向下一个位置
        oldStartVNode = oldChildren[++oldStartIdx]
        newStartVNode = newChildren[++newStartIdx]

    } else if (oldEndVNode.key === newEndVNode.key) {
        // 步骤二:oldEndVNode 和 newEndVNode 比较
        // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
        patch(oldEndVNode, newEndVNode, container)

        // 更新索引和头尾部节点变量
        oldEndVNode = oldChildren[--oldEndIdx]
        newEndVNode = newChildren[--newEndIdx]

    } else if(oldStartVNode.key === newEndVNode.key) {
        // 步骤三:oldStartVNode 和 newEndVNode 比较
        patch(oldStartVNode, newEndVNode, container)
        insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

        oldStartVNode = oldChildren[++oldStartIdx]
        newEndVNode = newChildren[--newEndIdx]


    } else if (oldEndVNode.key === newStartVNode.key) {
        // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
        // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
        // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。


        // 第四步:oldEndVNode 和 newStartVNode 比较
        // 仍然需要调用 patch 函数进行打补丁
        patch(oldEndVNode, newStartVNode, container)

        // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
        insert(oldEndVNode.el, container, oldStartVNode.el)
        
        // 移动 DOM 完成后，更新索引值，指向下一个位置
        oldEndVNode = oldChildren[--oldEndIdx]
        newStartVNode = newChildren[++newStartIdx]
    }  else {
        // 处理非理想情况

        // 在旧的一 组子节点中，找到与新的一组子节点的头部节点具有相同 key 值的节点
        // 遍历旧的一组子节点，试图寻找与 newStartVNode 拥有相同 key 值的节点
        // idxInOld 就是新的一组子节点的头部节点在旧的一组子节点中的索引
        const idxInOld = oldChildren.findIndex(node => node.key === newStartVNode.key)

        // idxInOld 大于 0，说明找到了可复用的节点，并且需要将其对应的真实DOM 移动到头部
        if(idxInOld > 0) {
            // idxInOld 位置对应的 vnode 就是需要移动的节点
            const vnodeToMove = oldChildren[idxInOld]
            
            // 不要忘记除移动操作外还应该打补丁
            patch(vnodeToMove, newStartVNode, container)

            // 将 vnodeToMove.el 移动到头部节点 oldStartVNode.el 之前，因此使用后者作为锚点
            insert(vnodeToMove.el, container, oldStartVNode.el)

            // 由于位置 idxInOld 处的节点所对应的真实 DOM 已经移动到了别处，因此将其设置为 undefined
            oldChildren[idxInOld] = undefined
            
            // 最后更新 newStartIdx 到下一个位置
            newStartVNode = newChildren[++newStartIdx]
        }
    }
}

观察上面的代码，在循环开始时，我们优先判断头部节点和尾部节点是否存在。如果不存在，则说明它们已经被处理过了，直接跳到下一个位置即可。在这一轮比较过后，新旧两组子节点与真实 DOM 节点的状态如图 下图 所示：
请添加图片描述

现在，四个步骤又重合了，接着进行最后一轮的比较：
第一步:比较旧的一组子节点中的头部节点 p-3 与新的一组子节点中的头部节点 p-3，两者的 key 值相同，可以复用。在第一步中找到了可复用的节点。由于两者都是头部节点，因此不需要进行 DOM 移动操作，直接打补丁即可。在这一轮比较过后，最终状态如图 下图 所示：
请添加图片描述
这时，满足循环停止的条件，于是更新完成。最终，真实 DOM 节点的顺序与新的一组子节点的顺序一致，都是:p-2、p-4、p-1、p-3。

添加新元素

添加新元素的时机：1.四个步骤的比较中都找不到可复用的节点 。 2.尝试拿新的一组子节点中的头部节点 p-4 去旧的一组子节点中寻找具有相同 key 值的节点，但在旧的一组子节点中根本就没有 p-4 节点。这说明节点 p-4 是一个新增节点。

案例1如下：

  • 旧的一组子节点:p-1、p-2、p-3。
  • 新的一组子节点:p-4、p-1、p-3、p-2。
    请添加图片描述

代码如下：

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
                if (!oldStartVNode) {
                    oldStartVNode = oldChildren[++oldStartIdx]
                } else if (oldStartVNode.key === newStartVNode.key) {
                    // 步骤一:oldStartVNode 和 newStartVNode 比较
                    // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
                    patch(oldStartVNode, newStartVNode, container)
                    // 更新相关索引，指向下一个位置
                    oldStartVNode = oldChildren[++oldStartIdx]
                    newStartVNode = newChildren[++newStartIdx]
    
                } else if (oldEndVNode.key === newEndVNode.key) {
                    // 步骤二:oldEndVNode 和 newEndVNode 比较
                    // 节点在新的顺序中仍然处于尾部，不需要移动，但仍需打补丁
                    patch(oldEndVNode, newEndVNode, container)

                    // 更新索引和头尾部节点变量
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newEndVNode = newChildren[--newEndIdx]
    
                } else if(oldStartVNode.key === newEndVNode.key) {
                    // 步骤三:oldStartVNode 和 newEndVNode 比较
                    patch(oldStartVNode, newEndVNode, container)
                    insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)

                    oldStartVNode = oldChildren[++oldStartIdx]
                    newEndVNode = newChildren[--newEndIdx]

    
                } else if (oldEndVNode.key === newStartVNode.key) {
                    // 我们找到了具有相同 key 值的节点。这说明，原来处于尾部的节点在新的顺序中应该处于头部。
                    // 于是，我们只需要以头部元素oldStartVNode.el 作为锚点，将尾部元素 oldEndVNode.el 移动到锚点前面即可。
                    // 但需要注意的是，在进行 DOM 的移动操作之前，仍然需要调用 patch 函数在新旧虚拟节点之间打补丁。
    
    
                    // 第四步:oldEndVNode 和 newStartVNode 比较
                    // 仍然需要调用 patch 函数进行打补丁
                    patch(oldEndVNode, newStartVNode, container)
    
                    // 移动dom操作  oldEndVNode.el 移动到 oldStartVNode.el 前面
                    insert(oldEndVNode.el, container, oldStartVNode.el)
                    
                    // 移动 DOM 完成后，更新索引值，指向下一个位置
                    oldEndVNode = oldChildren[--oldEndIdx]
                    newStartVNode = newChildren[++newStartIdx]
                }  else {
                    // 处理非理想情况

                    // 在旧的一 组子节点中，找到与新的一组子节点的头部节点具有相同 key 值的节点
                    // 遍历旧的一组子节点，试图寻找与 newStartVNode 拥有相同 key 值的节点
                    // idxInOld 就是新的一组子节点的头部节点在旧的一组子节点中的索引
                    const idxInOld = oldChildren.findIndex(node => node.key === newStartVNode.key)

                    // idxInOld 大于 0，说明找到了可复用的节点，并且需要将其对应的真实DOM 移动到头部
                    if(idxInOld > 0) {
                        // idxInOld 位置对应的 vnode 就是需要移动的节点
                        const vnodeToMove = oldChildren[idxInOld]
                        
                        // 不要忘记除移动操作外还应该打补丁
                        patch(vnodeToMove, newStartVNode, container)

                        // 将 vnodeToMove.el 移动到头部节点 oldStartVNode.el 之前，因此使用后者作为锚点
                        insert(vnodeToMove.el, container, oldStartVNode.el)

                        // 由于位置 idxInOld 处的节点所对应的真实 DOM 已经移动到了别处，因此将其设置为 undefined
                        oldChildren[idxInOld] = undefined
                        
                        // 最后更新 newStartIdx 到下一个位置
                        newStartVNode = newChildren[++newStartIdx]
                    } else {

+          				// 新增节点
+           			// 将 newStartVNode 作为新节点挂载到头部，使用当前头部节点oldStartVNode.el 作为锚点
+           			patch(null, newStartVNode, container, oldStartVNode.el)
                    }
                }
            }

当条件idxInOld > 0不成立时，说明 newStartVNode 节点是全新的节点。又由于 newStartVNode 节点 是头部节点，因此我们应该将其作为新的头部节点进行挂载。所以， 在调用 patch 函数挂载节点时，我们使用 oldStartVNode.el 作为 锚点。在这一步操作完成之后，新旧两组子节点以及真实 DOM 节点的 状态如下图所示：
请添加图片描述

案例2

  • 旧的一组子节点:p-1、p-2、p-3。
  • 新的一组子节点:p-4、p-1、p-2、p-3。
    第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-4，两者的 key 值不同，不可以复用。
    第二步:比较旧的一组子节点中的尾部节点 p-3 与新的一组子节点中的尾部节点 p-3，两者的 key 值相同，可以复用。
    在第二步中找到了可复用的节点，因此进行更新。更新后的新旧两组子节点以及真实 DOM 节点的状态如图下图 所示：
    请添加图片描述
    接着进行下一轮的比较：
    第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-4，两者的 key 值不同，不可以复用。
    第二步:比较旧的一组子节点中的尾部节点 p-2 与新的一组子节点中的尾部节点 p-2，两者的 key 值相同，可以复用。
    我们又在第二步找到了可复用的节点，于是再次进行更新。更新后的新旧两组子节点以及真实 DOM 节点的状态如图 下图 所示：

请添加图片描述
接着，进行下一轮的更新：
第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-4，两者的 key 值不同，不可以复用。
第二步:比较旧的一组子节点中的尾部节点 p-1 与新的一组子节点中的尾部节点 p-1，两者的 key 值相同，可以复用。

还是在第二步找到了可复用的节点，再次进行更新。更新后的新旧两组子节点以及真实 DOM 节点的状态如图 下图 所示：
请添加图片描述

当这一轮更新完毕后，由于变量 oldStartIdx 的值大于oldEndIdx 的值，满足更新停止的条件，因此更新停止。但通过观察可知，节点 p-4 在整个更新过程中被遗漏了，没有得到任何处理，这说明我们的算法是有缺陷的。为了弥补这个缺陷，我们需要添加额外的处理代码：

 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { 
  // 省略部分代码
 }
 // 循环结束后检查索引值的情况，
+  if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
+ 	// 如果满足条件，则说明有新的节点遗留，需要挂载它们
+ for (let i = newStartIdx; i <= newEndIdx; i++) {
+      patch(null, newChildren[i], container, oldStartVNode.el)


 +  }
 }

我们在 while 循环结束后增加了一个 if 条件语句，检查四个索引值的情况。根据图上图可知，如果条件oldEndIdx <oldStartIdx && newStartIdx <= newEndIdx成立，说明新的一组子节点中有遗留的节点需要作为新节点挂载。哪些节点是新节点呢?索引值位于 newStartIdx 和 newEndIdx 这个区间内的节点都是新节点。``于是我们开启一个 for 循环来遍历这个区间内的节点并逐一挂载。挂载时的锚点仍然使用当前的头部节点oldStartVNode.el，这样就完成了对新增元素的处理。

移除不存在的元素

案例如下：

  • 旧的一组子节点:p-1、p-2、p-3。
  • 新的一组子节点:p-1、p-3。
    请添加图片描述

可以看到，在新的一组子节点中 p-2 节点已经不存在了。为了搞清楚应该如何处理节点被移除的情况，我们还是按照双端 Diff 算法的思路执行更新。
第一步:比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-1，两者的 key 值相同，可以复用。
在第一步的比较中找到了可复用的节点，于是执行更新。在这一轮比较过后，新旧两组子节点以及真实 DOM 节点的状态如图下图所示：
请添加图片描述
接着，执行下一轮更新：
第一步:比较旧的一组子节点中的头部节点 p-2 与新的一组子节点中的头部节点 p-3，两者的 key 值不同，不可以复用。
第二步:比较旧的一组子节点中的尾部节点 p-3 与新的一组子节点中的尾部节点 p-3，两者的 key 值相同，可以复用。

在第二步中找到了可复用的节点，于是进行更新。更新后的新旧两组子节点以及真实 DOM 节点的状态如图 下图所示：
请添加图片描述
此时变量 newStartIdx 的值大于变量 newEndIdx 的值，满足更新停止的条件，于是更新结束。但观察图 10-34 可知，旧的一组子节点中存在未被处理的节点，应该将其移除。因此，我们需要增加额外的代码来处理它，如下所示:

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { 
  // 省略部分代码
 }
 // 循环结束后检查索引值的情况，
if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
 	// 如果满足条件，则说明有新的节点遗留，需要挂载它们
 for (let i = newStartIdx; i <= newEndIdx; i++) {
      patch(null, newChildren[i], container, oldStartVNode.el)


   }
+ } else if (newEndIdx < newStartIdx && oldStartIdx <= oldEndIdx) {
+ 	 for (let i = oldStartIdx; i <= oldEndIdx; i++) {
+		unmount(oldChildren[i])
+	}
 }

与处理新增节点类似，我们在 while 循环结束后又增加了一个else…if 分支，用于卸载已经不存在的节点。由图 上图 可知，索引值位于 oldStartIdx 和 oldEndIdx 这个区间内的节点都应该被卸载，于是我们开启一个 for 循环将它们逐一卸载。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/66753.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

并发三大特性和JMM

并发三大特性和JMM

一、并发三大特性 1、原子性 一个或多个操作&#xff0c;要么全部执行且在执行过程中不被任何因素打断&#xff0c;要么全部不执行。在Java中&#xff0c;对基本数据类型的读取和赋值操作是原子性操作&#xff08;64位处理器&#xff09;。不采取任何的原子性保障措施的自增操…
阅读更多...
c++11 标准模板（STL）（std::basic_fstream）（三）

c++11 标准模板（STL）（std::basic_fstream）（三）

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_fstream : public std::basic_iostream<CharT, Traits> 类模板 basic_fstream 实现基于文件的流上的高层输入/输出。它将 std::basic_i…
阅读更多...
Cadvisor+InfluxDB+Grafan+Prometheus（详解）

Cadvisor+InfluxDB+Grafan+Prometheus（详解）

目录 一、CadvisorInfluxDBGrafan案例概述 &#xff08;一&#xff09;Cadvisor Cadvisor 产品特点&#xff1a; &#xff08;二&#xff09;InfluxDB InfluxDB应用场景&#xff1a; InfluxDB主要功能&#xff1a; InfluxDB主要特点&#xff1a; &#xff08;三&#…
阅读更多...
MyCat配置文件schema.xml讲解

MyCat配置文件schema.xml讲解

1.MyCat配置 1.1 schema标签 如果checkSQLschema配置的为false&#xff0c;那么执行DB01.TB_ORDER时就会报错&#xff0c;必须用use切换逻辑库以后才能进行查询。 sqlMaxLimit如果未指定limit进行查询&#xff0c;列表查询模式默认为100,最多只查询100条。因为用mycat后默认数…
阅读更多...
linux自定义网络访问规则

linux自定义网络访问规则

1.更改防火墙默认区域为trusted firewall-cmd --set-default-zonetrusted 2.新建一个zone&#xff0c;将想要访问本机80端口的ip&#xff0c;如&#xff1a;192.168.3.99 &#xff0c;添加的这个zone中&#xff0c;同时在这个zone中放行80端口。 firewall-cmd --permanent --ne…
阅读更多...
SEO搜索引擎优化

SEO搜索引擎优化

目录 场景 内部业务To B (Business-to-Business&#xff0c;B2B)需要降低SEO&#xff0c;反爬 客户业务To C (Business-to-Consumer&#xff0c;B2C)需要提高SEO TDK优化 Title&#xff08;标题&#xff09; Description&#xff08;描述&#xff09; Keywords&#xff…
阅读更多...
windows 安装免费3用户ccproxy ubuntu 代理上网

windows 安装免费3用户ccproxy ubuntu 代理上网

Windows 上进行安装 ubuntu 上进行设置 方法一 (临时的手段) 如果仅仅是暂时需要通过http代理使用apt-get&#xff0c;您可以使用这种方式。 在使用apt-get之前&#xff0c;在终端中输入以下命令&#xff08;根据您的实际情况替换yourproxyaddress和proxyport&#xff09;。 终…
阅读更多...
布谷鸟配音：一站式配音软件

布谷鸟配音：一站式配音软件

这是一款智能语音合成软件&#xff0c;可以快速将文字转换成语音&#xff0c;拥有多种真人模拟发音&#xff0c;可以选择不同男声、女声、童声&#xff0c;以及四川话、粤语等中文方言和外语配音&#xff0c;并且可对语速、语调、节奏、数字读法、多音字、背景音等进行全方位设…
阅读更多...
初识Container

初识Container

1. 什么是Container&#xff08;容器&#xff09; 要有Container首先要有Image&#xff0c;也就是说Container是通过image创建的。 Container是在原先的Image之上新加的一层&#xff0c;称作Container layer&#xff0c;这一层是可读可写的&#xff08;Image是只读的&#xff0…
阅读更多...
Mybatis-Plus使用updateById()、update()将字段更新为null

Mybatis-Plus使用updateById()、update()将字段更新为null

文章目录 一、问题背景二、问题原因三、解决方案1. 设置全局的field-strategy2. 对某个字段设置单独的field-strategy3. 使用UpdateWrapper方式更新&#xff08;推荐使用&#xff09; 本文主要介绍了Mybatis-Plus使用updateById()、update()将字段更新为null&#xff0c;文中通…
阅读更多...
Redis 6.5 服务端开启多线程源码

Redis 6.5 服务端开启多线程源码

redis支持开启多线程&#xff0c;只有从socket到读取缓冲区和从输出缓冲区到socket这两段过程是多线程&#xff0c;而命令的执行还是单线程&#xff0c;并且是由主线程执行 借鉴&#xff1a;【Redis】事件驱动框架源码分析&#xff08;多线程&#xff09; 一、main启动时初始化…
阅读更多...
freeswitch的mod_xml_curl模块动态获取dialplan

freeswitch的mod_xml_curl模块动态获取dialplan

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 mod_xml_curl模块支持从web服务获取xml配置&#xff0c;本文介绍如何动态获取dialplan配置。 环境 centos&#xff1a;CentOS release 7.0 (Final)或以上版本 freeswitch&#xff1a;v1.6.20 GCC&#xff1a;4.8.5…
阅读更多...
HTTPS安全通信

HTTPS安全通信

HTTPS，TLS/SSL Hyper Text Transfer Protocol over Secure Socket Layer，安全的超文本传输协议，网景公式设计了SSL(Secure Sockets Layer)协议用于对Http协议传输的数据进行加密，保证会话过程中的安全性。 使用TCP端口默认为443 TLS：(Transport Layer Security，传输层…
阅读更多...
View绘制流程-Window创建

View绘制流程-Window创建

前言&#xff1a; View绘制流程中&#xff0c;主要流程是这样的&#xff1a; 1.用户进入页面&#xff0c;首先创建和绑定Window&#xff1b; 2.首次创建以及后续vsync信号来临时&#xff0c;会请求执行刷新流程&#xff1b; 3.刷新流程完成后&#xff0c;会通知SurfaceFlin…
阅读更多...
(力扣)用两个栈实现队列

(力扣)用两个栈实现队列

这里是栈的源代码&#xff1a;栈和队列的实现 当然&#xff0c;自己也可以写一个栈来用&#xff0c;对题目来说不影响&#xff0c;只要符合栈的特点就行。 题目&#xff1a; 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、pe…
阅读更多...
【HDFS】每天一个RPC系列----complete（二）：客户端侧

【HDFS】每天一个RPC系列----complete（二）：客户端侧

上图给出了最终会调用到complete RPC的客户端侧方法链路（除去Router那条线了）。 org.apache.hadoop.hdfs.DFSOutputStream#completeFile(org.apache.hadoop.hdfs.protocol.ExtendedBlock)： 下面这个方法在complete rpc返回true之前，会进行重试，直到超过最大重试次数抛异…
阅读更多...
深度优先搜索与动态规划|543, 124, 687

深度优先搜索与动态规划|543, 124, 687

深度优先搜索与动态规划|543. 二叉树的直径&#xff0c;124. 二叉树中的最大路径和&#xff0c;687. 最长同值路径 二叉树的直径二叉树中的最大路径和最长同值路径 二叉树的直径 好久没写二叉树了&#xff0c;主要还是看遍历的顺序是什么样的。 # Definition for a binary tr…
阅读更多...
代码随想录算法训练营之JAVA｜第二十五天| 491. 递增子序列

代码随想录算法训练营之JAVA｜第二十五天| 491. 递增子序列

今天是第25天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天。 算法挑战链接 491. 递增子序列https://leetcode.cn/problems/non-decreasing-subsequences/ 第一想法 题目理解&#xff1a;在给定的一个数组中&#xff0c;找出全部的递增列表。要求不能有重复。 这是一…
阅读更多...
【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题

【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题

在使用过程中遇到过很多报错&#xff0c;不管大的还是小的&#xff0c;在这里总结下&#xff0c;应该会持续更新&#xff1b; 1、设置贴地之后报错 可能是因为 arcType&#xff1a;Cesium.arcType.NONE 与 clampToGround&#xff1a;true 是相互冲突的&#xff0c;两个都设置就…
阅读更多...
jdk1.7与jdk1.8的HashMap区别2-底层原理区别

jdk1.7与jdk1.8的HashMap区别2-底层原理区别

jdk1.7与jdk1.8的HashMap区别1-基本结构与属性对比_ycsdn10的博客-CSDN博客 一、代码区别 1.代码数&#xff1a;JDK1.7与JDK1.8相差了一倍的代码 2.方法数&#xff1a;JDK1.7是40个&#xff0c;JDK1.8是51个&#xff08;只算基本方法&#xff09; 二、Hash差别 1.JDK1.7 st…
阅读更多...
最新文章

Copyright @ 2022~2023