实现简单的DOM-Diff算法

最新推荐文章于 2024-05-28 19:43:49 发布
最新推荐文章于 2024-05-28 19:43:49 发布
阅读量718 收藏 2
点赞数 2
分类专栏： 前端 文章标签： 实现简单的DOM-Diff算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36297981/article/details/90045392
版权

实现简单的DOM-Diff算法

github传送门

什么是虚拟DOM

虚拟DOM简而言之就是用JS去按照DOM结构来实现DOM的树形结构的对象，当然，由于真实的DOM有很多的属性接口，而我们在这里的虚拟DOM只描述真实DOM 的一部分属性。

创建虚拟DOM

巧妇难为无米之炊，既然要实现DOM-Diff算法，那么我们肯定需要创建虚拟DOM，并且要知道虚拟DOM如何渲染成真实的DOM，

// element.js

// 定义虚拟DOM的类
class Element {
  constructor(type, props, children) {
    this.type = type
    this.props = props
    this.children = children
  }
}

// 创建虚拟DOM
function createElement(type, props, children) {
  return new Element(type, props, children)
}

这里我们首先定义了用来描述虚拟DOM的类Element, Element里定义了三个属性:

  • type: 指定元素的标签类型，如’li’, ‘div’, 'a’等
  • props: 表示指定元素身上的属性，如class, style, 自定义属性等
  • children: 表示指定元素是否有子节点，参数以数组的形式传入

接着我们定义了createElement函数来为我们创建虚拟DOM对象

接下来我们来测试一下能够成功创建虚拟DOM

// index.js
let virtualDom = createElement('ul', {class: 'list'}, [
  createElement('li', {class: 'item'}, ['周杰伦']),
  createElement('li', {class: 'item'}, ['林俊杰']),
  createElement('li', {class: 'item'}, ['王力宏']),
])

console.log(virtualDom)

在这里插入图片描述

可以看到我们已经可以成功的创建虚拟DOM对象了，接下来我们就要将虚拟DOM渲染成真实DOM并挂载到页面中

// element.js

...

// 将虚拟DOM转换为真实DOM
function render(vDom) {
  // 创建DOM元素
  let el = document.createElement(vDom.type)

  // 遍历虚拟DOM的props, 给真实DOM设置属性
  for (let key in vDom.props) {
    setAttr(el, key, vDom.props[key])
  }

  // 遍历子节点
  // 如果是虚拟DOM，则递归渲染
  // 否则则代表是文本节点，直接创建
  vDom.children.forEach(item => {
    let node = item instanceof Element ? render(item) : document.createTextNode(item)
    el.appendChild(node)
  })
  return el
}

// 将真实DOM添加到页面中
function renderDom(el, target) {
  target.appendChild(el)
}

// 设置DOM的属性
function setAttr(el, key, value) {
  switch(key) {
    case 'value': 
      // 如果 el 是 input或者textarea 就直接设置其value
      if (el.tagName.toLowerCase() === 'input' || el.tagName.toLowerCase() === 'textarea') {
        el.value = value
      }
      else {
        el.setAttribute(key, value)
      }
      break
    case 'style':
      el.style.cssText = value
    default:
      el.setAttribute(key, value)
  }
}

将虚拟DOM渲染成真实DOM的逻辑也比较简单，主要步骤就是创建节点→设置节点属性→添加子节点

接下来我们检验一下我们的函数能否正常运行

// index.js

// 创建虚拟DOM
let virtualDom = createElement('ul', {class: 'list'}, [
  createElement('li', {class: 'item'}, ['周杰伦']),
  createElement('li', {class: 'item'}, ['林俊杰']),
  createElement('li', {class: 'item'}, ['王力宏']),
])

console.log(virtualDom)

// 将虚拟DOM渲染成真实DOM并添加到页面中
var el = render(virtualDom)
console.log(el)

renderDom(el, document.getElementById("app"))

在这里插入图片描述

可以看到虚拟DOM被成功地渲染成真实DOM并添加到页面中

DOM-Diff算法的实现

DOM-diff那一定要清楚其存在的意义，给定任意两棵树，采用先序深度优先遍历的算法找到最少的转换步骤

DOM-diff比较两个虚拟DOM的区别，也就是在比较两个对象的区别。

作用: DOM-diff 算法主要功能是收集新老两个节点之间的变化，然后根据节点的变化来更新DOM

// diff.js
function diff(oldNode, newNode) {
  // 收集两个VDOM节点之间的不同

  // 递归比较两个虚拟DOM，将比较结果放入Pathes中
  let patches = walk(oldNode, newNode)

  return patches
}


function walk(oldNode, newNode) {
  let currentPatch = {} // 每一个DOM元素都有一个patch

  if (!newNode) {
    // 如果不存在newNode，说明该Node被移除
    currentPatch.diff = {type: 'REMOVE', oldNode}
  } else if(newNode && !oldNode) {
    // 说明是新结点
    currentPatch.diff = {type: 'ADD', newNode}
  } else if (isString(oldNode) && isString(newNode)) {
    // 如果是文本, 则判断文本是否一致
    if (oldNode !== newNode) {
      currentPatch.diff = {type: 'TEXT', newNode}
    }
  } else if (oldNode.type === newNode.type) {
    // 如果是虚拟DOM元素
    // 比较属性是否相同
    let attrDiff = diffAttr(oldNode.props, newNode.props)
    if (Object.keys(attrDiff).length > 0) {
      currentPatch.diff = {type: 'ATTR', attrDiff}
    } else {
      // 说明该元素的属性相同, 可以理解为node没有被修改
      currentPatch.diff = {}
    }
    // 比较子节点是否相同
    currentPatch.children = []
    diffChildren(oldNode.children, newNode.children, currentPatch.children)
  } else if(oldNode.type !== newNode.type) {
    // 否则说明节点被替换了
    currentPatch.diff = {type: 'REPLACE', newNode}
  } else {
    // 说明没有被修改, 添加一个空对象
    currentPatch.diff = {}
  }

  return currentPatch
}


function isString(obj) {
  return obj && typeof obj === 'string'
}

function diffAttr(oldAttrs, newAttrs) {
  let patch = {}
  // 新老属性是否相同
  for (let key in oldAttrs) {
    if (oldAttrs[key] !== newAttrs[key]) {
      patch[key] = newAttrs[key]
    }
  }

  // 老节点中没有但新结点中有的属性
  for (let key in newAttrs) {
    if (!oldAttrs.hasOwnProperty(key)) {
      patch[key] = newAttrs[key]
    }
  }

  return patch
}

function diffChildren(oldChildren, newChildren, childrenPatch) {
  // 比较子节点
  newChildren.forEach((item, i) => {
    childrenPatch.push(walk(oldChildren[i], item))
  })
}

虽然代码有点长，但还是可以挺好理解的，主要工作就是收集每个节点是否产生了变化，主要做了一下工作来得到两个节点的不同, 最终得到的patch的结构和虚拟DOM结构一样都是一个树状的结构

  • 新的DOM节点不存在{type: ‘REMOVE’, index}

    if (!newNode) {
    // 如果不存在newNode，说明该Node被移除
    currentPatch.diff = {type: 'REMOVE', oldNode}
  }

  • 如果新结点存在，老节点不存在，则说明添加了新的节点

    else if(newNode && !oldNode) {
    // 说明是新结点
   currentPatch.diff = {type: 'ADD', newNode}
}

  • 如果是文本节点，则比较文本的变化{type: ‘TEXT’, text: 1}

    else if (isString(oldNode) && isString(newNode)) {
    // 如果是文本, 则判断文本是否一致
    if (oldNode !== newNode) {
      currentPatch.diff = {type: 'TEXT', newNode}
    }
  }

  • 当节点类型相同时，去看一下属性是否相同，然后判断子节点是否相同

    else if (oldNode.type === newNode.type) {
    // 如果是虚拟DOM元素
    // 比较属性是否相同
    let attrDiff = diffAttr(oldNode.props, newNode.props)
    if (Object.keys(attrDiff).length > 0) {
      currentPatch.diff = {type: 'ATTR', attrDiff}
    } else {
      // 说明该元素的属性相同, 可以理解为node没有被修改
      currentPatch.diff = {}
    }
    // 比较子节点是否相同
    currentPatch.children = []
    diffChildren(oldNode.children, newNode.children, currentPatch.children)
  }

  • 否则，直接采用替换模式{type: ‘REPLACE’, newNode}

    else if(oldNode.type !== newNode.type) {
    // 否则说明节点被替换了
    currentPatch.diff = {type: 'REPLACE', newNode}
}

  • 最后将所有的变化收集起来

    else {
    // 说明没有被修改, 添加一个空对象
    currentPatch.diff = {}
}
节点更新
// patch.js
function patch(node, patch) {
  run(node, patch)
}

/**
 * 
 * @param {HTMLElement} node 节点
 * @param {Object} patches 节点之间的不同
 * @param {Number} index 节点树的第几层
 * @param {Number} i 该层的第几个节点
 */
function run(node, patch) {
  let childNodes = node.childNodes
  let patchChildren = patch.children
  // 先修改每个子节点
  for (let i = 0; i < childNodes.length; ++i) {
    run(childNodes[i], patchChildren[i])
  }
  
  // patcheChildren的长度大于childNodes的长度, 说明有添加了新的节点
  if (patchChildren && patchChildren.length && patchChildren.length > childNodes.length) {
    for (let i = childNodes.length; i < patchChildren.length; ++i) {
      doPatch(node, patchChildren[i])
    }
  }
  if (patch) {
    doPatch(node, patch)
  }
}

function doPatch(node, patch) {
  console.log(Object.keys(patch))
  if (Object.keys(patch).length > 0) {
    let { diff } = patch
    switch(diff.type) {
      case 'ADD':
        var newNode = diff.newNode
        newNode = newNode instanceof Element ? render(newNode) : document.createTextNode(newNode)
        node.appendChild(newNode)
        break
      case 'ATTR':
        for (let key in diff.attrDiff) {
          let value = diff.attrDiff[key]
          setAttr(node, key, value)
        }
        break
      case 'TEXT':
        node.textContent = diff.newNode
        break
      case 'REPLACE':
        var newNode = diff.newNode
        let replaceNode = newNode instanceof Element ? render(newNode) : document.createTextNode(newNode)
        node.parentNode.replaceNode(replaceNode, node)
        break
      case 'REMOVE':
        node.parentNode.removeChild(node)
        break
    }
  }
}

我们来分析一下patch都做了什么

patch内部只是简单的调用了run方法

run方法中做了两件事

  • 深度优先当前节点子节点先对子节点进行修改
  • 如果patch.children的长度大于当前节点的子节点的长度，说明添加了一个新的元素，调用doPatch方法将新添加的元素加入当前节点
  • 然后调用doPatch方法对当前节点进行处理

doPatch方法主要是根据修改的类型对node节点进行处理

最后我们再来测试一下我们的函数能够正常的工作

// index.js
// 创建虚拟DOM
let virtualDom = createElement('ul', {class: 'list'}, [
  createElement('li', {class: 'item'}, ['周杰伦']),
  createElement('li', {class: 'item'}, ['林俊杰']),
  createElement('li', {class: 'item'}, ['王力宏']),
])

console.log(virtualDom)

// 将虚拟DOM渲染成真实DOM并添加到页面中
var el = render(virtualDom)
console.log(el)
renderDom(el, document.getElementById("app"))

let virtualDom2 = createElement('ul', {class: 'item-list'}, [
  createElement('li', {class: 'item active'}, ['七里香']),
  createElement('li', {class: 'item abc'}, ['曹操']),
  createElement('li', {class: 'item'}, ['王力宏']),
  createElement('li', {class: 'item'}, ['ABC']),
])

let patches = diff(virtualDom, virtualDom2)
console.log(patches)
patch(el, patches)
console.log(el)

在这里插入图片描述

可以看到我们函数正常的运行了

总结

我们来梳理一下整个DOM-diff的过程：

  • 用JS对象模拟DOM（虚拟DOM）

  • 把此虚拟DOM转成真实DOM并插入页面中（render）

  • 如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）

  • 把差异对象应用到真正的DOM树上（patch）

最后说一句，这只是一个简单的DOM-Diff算法

当年明月又天涯
关注
专栏目录
react-dom-diff:演示React组件的生命周期和DOM diff算法
05-12
React通过diff算法在最小化DOM操作上实现高效更新。在原生JavaScript中，频繁的DOM操作会带来性能问题，而React通过比较新旧两个组件树的差异，只对实际改变的部分进行更新，这就是DOM diff的核心思想。具体步骤包括...
【每天一个知识点】dom-diff原理以及 算法的妙用（最长子序列）
youshenshiwoye的博客
04-21 722
DOM-diff是面试题当中经常遇到的一个考点，也可以说是vue和react里面的精华所在之一。 那么这篇文章我想通俗易懂的方式简单的解答一下整个过程。 要知道dom-diff 就要先知道虚拟dom 1.为什么说是数据驱动页面？ 我们都知道vue和react都是用数据驱动页面的应用，那么他的原理到底是？ 答：由于dom流式布局的原因，平常我们操作一次dom就要重新布局一次，所以vue和react推出的数据驱动页面的操作，就是创建一个虚拟的dom对象，所有的操作都只是修改这个虚拟dom，最后再一起进行布局，从
javascript基础修炼(11)——DOM-DIFF的实现
weixin_33775582的博客
12-10 137
目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff代码 4.3 根据补丁包更新视图 ...
【Vue源码】虚拟DOM篇-DOM-Diff算法
最新发布
weixin_44040492的博客
05-28 1460
VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点，然后就可以对比新旧两份VNode，找出差异所在，然后更新有差异的DOM节点，最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在。
React源码中的dom-diff
grooyo的博客
10-21 244
这一章讲述了，react的diff过程，也学习了react的diff策略，经过上述的处理之后就会走到，在这个过程中我们会根据新生成的fiber树去创建dom元素，根据其上的副作用flags、链表去做副作用的处理，在commit阶段的函数中进行真实dom的插入处理，下一章将讲述真实dom的生成。
dom diff
weixin_44669966的博客
03-04 359
dom diff：虚拟dom的对比算法 就是一个函数，称之为patch patchs = patch（旧的虚拟dom， 新的虚拟dom） patchs就是要运行的dom的最小操作 Vue中的diff算法是经过优化的： 只比较同一层级，不跨级比较 比较标签名，如果标签名不同，直接删除，不继续深度比较 如果标签名相同，看key是否相同，key相同就认为是相同节点，不进行深度比较 例子：把虚拟dom想象成树形 <div :class="x"> <span v-if="y
vue-dom-diff:vue 虚拟dom diff算法实现
05-05
项目中的代码通常包括虚拟DOM的创建、更新以及Diff算法的实现。通过查看源代码，你可以更好地理解这些概念是如何在实际场景中应用的。 虚拟DOM的优势在于它可以减少DOM操作，因为JavaScript操作比浏览器的DOM操作快...
dom-diff
04-01
对于React，"递增法"是指其经典的Reconciliation（协调）过程，即DOM diff算法的一种实现。React遍历新旧两个元素列表，通过比较每个元素的类型、键值等信息，来决定是应该更新、插入还是删除元素。这种自底向上、...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
虚拟DOM与diff算法.doc
07-09
《虚拟DOM与diff算法》 在现代Web开发中，虚拟DOM（Virtual DOM）与diff算法是提高应用性能的关键技术，特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题，使得开发者可以更高效地处理用户界面的...
DOM-DIFF原理 （多节点的处理）及个人实现
x21112xxx的博客
09-04 107
因为新的比老的数量多，第一轮循环结束的时候，老的已经遍历完成，新的还有剩下的。1.从B开始，把所有的老节点全闻放到一个 map中。再对比B和C，key不一样，则立刻跳出第一轮循环。只有老的或新的遍历完成才会走第2轮循环。全部复用老节点，只更新属性有就可以了。第对比A，key和类型一样，则复用A。如果key不同则立刻跳出第一轮循环。
非常简单易懂的DOM Diff算法简析
一个慢的博客
07-17 2万+
文章整理自阿里云栖视频 DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。 Tree DIFF是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是R组件，一模一样，不会发生变化；第二层进入Compon...
react/vue中dom-diff简易版实现
weixin_34127717的博客
11-04 288
dom-diff简易版实现 一、创建虚拟dom 利用 create-react-app快速创建一个项目模板； 删掉src下的源文件，替换成 index.js 首先我们先要用一个对象定义一个虚拟DOM的数据结构： Element { type: 'ul', props: { class: 'list' }, children: [ El...
让虚拟DOM和DOM-diff不再成为你的绊脚石
weixin_34344677的博客
03-25 221
Keep Moving 时至今日，前端对于知识的考量是越来越有水平了，逼格高大上了 各类框架大家已经可以说无论是工作还是日常中都已经或多或少的使用过了 曾经听说很多人被问到过虚拟DOM和DOM-diff算法是如何实现的，有没有研究过？ 想必问出此问题的也是高手高手之高高手了，很多人都半开玩笑的说：“面试造航母，工作拧螺丝” 那么，话不多说了，今天就让我们也来一起研究研究这个东东 好饭不怕晚，沉淀下...
vue中的diff算法
田兴的博客
01-15 2万+
一、是什么diff算法 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法更新的例子： 新旧VNode节
虚拟dom及diff算法解析
ckwang6的博客
12-10 4028
什么是DOM 浏览器HTML渲染过程 DOM树与渲染树 重绘与重排 事件委托 DOM操作性能分析 天生就慢 什么是虚拟DOM 虚拟DOM Diff算法 虚拟DOM性能分析
了解dom-diff算法
tangyuhui
08-13 219
虚拟DOM 1、新建react项目 //全局安装脚手架工具 $ npm install create-react-app -g //创建项目 $ create-react-app dom-diff // 进入项目目录 $ cd dom-diff // 编译 $ npm run start 2、定义虚拟DOM类 什么是虚拟DOM? 虚拟DOM就是使用javascript对象来表示真实DOM，是一个...
深入Vue2.x的虚拟DOM diff原理
热门推荐
小时光茶社
09-22 3万+
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可
React Native探索（四）：虚拟DOM Diff算法解析
Louis的专栏
01-08 4088
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心 虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组
深入理解Vue：虚拟DOM与diff算法解析
总结来说，虚拟DOM的引入是为了解决直接操作DOM导致的性能问题，通过diff算法找出最小化DOM变化的方法，实现高效的数据绑定和视图更新。Vue框架充分利用这些机制，提供了高性能的用户界面更新方案。在实际开发中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值