虚拟DOM和diff算法

一颗花生米。

于 2024-08-17 19:01:11 发布

阅读量626

点赞数 31

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_85770776/article/details/141284067

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

虚拟Dom和diff算法

虚拟 DOM 和 diff 算法是现代前端框架（如 Vue 和 React）中核心的优化技术，用于提高 UI 渲染的性能和效率。以下是对它们的详细:

虚拟DOM

概念：

虚拟 DOM（Virtual DOM）是一个轻量级的 JavaScript 对象，作为真实 DOM 的表示。它是对实际 DOM 结构的抽象，框架会通过虚拟 DOM 来管理和优化 DOM 的更新过程。
工作原理

创建虚拟 DOM：当组件的状态或属性发生变化时，框架会创建一个新的虚拟 DOM 树来表示组件的最新状态。
比较差异：框架将新创建的虚拟 DOM 树与之前的虚拟 DOM 树进行比较。这一步骤叫做“diffing”。
更新实际 DOM：通过 diff 算法计算出差异（diff），并只将这些差异应用到实际的 DOM 上，而不是重新渲染整个 DOM 树。这有助于提高性能和减少 DOM 操作的开销。

优点

性能提升：减少直接操作真实 DOM 的次数，降低重排和重绘的开销。
优化渲染：仅更新发生变化的部分，而不是重新渲染整个页面。

diff算法

概念

diff 算法用于比较两个虚拟 DOM 树的差异，并计算出最小的更新操作。这些操作随后应用到实际的 DOM 上，以确保用户界面的高效更新。

主要步骤

树的比较：将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找到它们之间的差异。
最小化更新：计算出需要更新的最小操作集，这些操作包括节点的插入、删除和更新。
批量更新：将这些计算出的更新操作批量应用到真实 DOM 上，从而提高性能。

核心思想

节点比较：算法会尽可能快速地判断节点是否相同，通常通过比较节点的类型、键（key）等来决定是否需要更深入的比较。
最小化变更：算法尽量只做最小必要的变更。例如，对于同一层级的元素，它通常会通过比较 key值来进行优化，以便能更准确地跟踪元素的移动和更新。

patch函数

patch 函数是虚拟 DOM 和 diff 算法中核心的一部分，负责将差异（diff）应用到真实 DOM 上。它是实现虚拟 DOM 更新的关键步骤，确保界面在数据变化时能够高效地进行更新。

patch 函数的作用

patch 函数的主要作用是将新的虚拟 DOM 树与旧的虚拟 DOM 树之间的差异应用到真实 DOM 上。这个过程包括插入、更新和删除节点，以确保实际 DOM 反映最新的虚拟 DOM 状态。

patch 函数的基本流程

比较差异：

patch 函数首先比较新的虚拟 DOM 节点和旧的虚拟 DOM 节点，找出它们之间的差异。
这些差异通常包括节点的类型变化、属性变化、子节点的变化等。

应用差异：

根据比较结果，patch 函数将差异应用到真实 DOM 上。这包括：
更新属性：更新节点的属性（如 class、style、id 等）。
更新文本内容：修改节点的文本内容。
插入新节点：在实际 DOM 中插入新创建的节点。
删除旧节点：从实际 DOM 中删除不再需要的节点。
移动节点：调整节点的位置，以匹配新的虚拟 DOM 结构。
详细步骤
以下是 patch 函数在应用差异时的详细步骤：
节点类型检查：
如果新节点和旧节点的类型不同，直接用新节点替换旧节点。

属性更新：
更新节点的属性。如果新节点的属性和旧节点的属性不同，patch 函数会更新真实 DOM 上的对应属性。

子节点更新：
递归地对比和更新子节点。patch 函数会递归地调用自身来处理子节点的差异。

文本内容更新：
如果新节点和旧节点的文本内容不同，patch 函数会更新文本内容。

节点插入和删除：
插入新节点到实际 DOM 中，删除旧节点。
注意点:绑定key 的作用：key 属性帮助框架在渲染列表时更高效地识别和更新元素。它确保了节点在不同渲染之间的稳定性，使得 DOM 更新更加准确和高效。
没有 key：缺少 key 属性会导致性能下降和更新错误，特别是在列表发生变化时。框架必须进行更多的工作来处理节点的更新、插入和删除，从而可能导致不必要的 DOM 操作和性能问题。

有key的diff算法

工作原理

节点类型和 key 比较：
Diff 算法首先比较节点的类型。如果新旧节点的类型不同，算法会替换旧节点为新节点。
如果节点类型相同，算法会进一步比较节点的 key 属性。key 是用来唯一标识节点的，如果 key 不同，算法会处理节点的插入、删除和更新。
生成映射：
使用 key，算法可以创建一个映射（通常是一个哈希表），将新虚拟 DOM 中的节点 key 映射到其在列表中的位置。
这个映射帮助算法快速查找和比较新旧节点的位置，提高更新效率。
最小化变更：
通过 key 映射，算法能够快速确定节点的变化，包括节点的插入、删除和移动。这减少了对节点的全量比较，并只更新必要的部分。
算法会利用这个映射来计算哪些节点需要移动、更新或删除，从而减少 DOM 操作的数量。
插入、删除和移动节点：
插入节点：如果新节点的 key 在旧节点中不存在，算法会插入这个新节点。

删除节点：如果旧节点的 key 在新节点中不存在，算法会删除这个旧节点。

移动节点：如果节点的 key 相同，但位置发生了变化，算法会移动节点到新位置。

具体实现步骤

以下是一个简化的 key 处理的 diff 算法的步骤：

创建 key 映射：
创建一个映射，将新虚拟 DOM 中每个节点的 key 和其在列表中的位置关联起来。
比较新旧节点：（前序对比，尾序对比）
对比新旧节点的 key，判断节点的添加、删除或移动。
使用映射来查找节点的位置和更新内容，避免全量比较。
处理节点更新：
更新属性：对于 key 相同的节点，更新其属性和内容。
插入新节点：将新节点插入到实际 DOM 中。
删除旧节点：从实际 DOM 中删除旧节点。
移动节点：调整节点的位置以匹配新的虚拟 DOM。

function patch(oldVNode, newVNode, container) {
  if (!oldVNode) {
    // 插入新节点
    insert(newVNode, container);
  } else if (!newVNode) {
    // 删除旧节点
    remove(oldVNode, container);
  } else if (oldVNode.key !== newVNode.key) {
    // 节点类型或 key 不同，替换旧节点
    replace(oldVNode, newVNode, container);
  } else {
    // 节点类型和 key 相同，更新节点
    updateProps(oldVNode, newVNode);
    patchChildren(oldVNode.children, newVNode.children, container);
  }
}

function patchChildren(oldChildren, newChildren, container) {
  const oldKeyMap = createKeyMap(oldChildren);
  const newKeyMap = createKeyMap(newChildren);

  // 处理删除和更新
  for (const key in oldKeyMap) {
    if (!(key in newKeyMap)) {
      // 删除旧节点
      remove(oldKeyMap[key], container);
    }
  }

  // 处理插入和更新
  for (const key in newKeyMap) {
    if (!(key in oldKeyMap)) {
      // 插入新节点
      insert(newKeyMap[key], container);
    } else {
      // 更新现有节点
      patch(oldKeyMap[key], newKeyMap[key], container);
    }
  }
}

function createKeyMap(vNodes) {
  const keyMap = {};
  vNodes.forEach(vNode => {
    keyMap[vNode.key] = vNode;
  });
  return keyMap;
}