简单diff算法与双端diff算法实现思路

已于 2023-04-19 15:32:29 修改
阅读量307 收藏 3
点赞数
文章标签： 数据结构 javascript vue.js
于 2023-04-19 15:26:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73704086/article/details/130244988
版权

简单diff算法

简单diff是基于递归来实现的，它适用于对比树形数据结构之间的差异

vue2.x就是使用的简单diff算法

实现思路是递归比较两个树的每个节点，如果两个节点相同，就比较它们的子节点，如果不同，就标记为删除或添加，并且停止递归

缺点的话就是只能比较树形数据结构，不能比较其他数据结构

双端diff算法

双端diff算法是简单diff算法的优化版本，是比较两个数组之间的差异，可以在不使用递归的情况下比较数组，从而提高效率。它可以处理更复杂的场景，比如移动了元素

vue3.x就是使用的双端diff算法

实现思路是从数组两端开始遍历，比较相邻元素是否相同，相同则比较下一对元素；如果不同，就标记为删除或添加，并继续遍历

缺点的话就只能比较序列类型数据结构，不能比较树形数据结构

以上就是个人学习到的见解

c+v高级工程师
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3 - diff算法之快速diff算法
军火库
09-30 988
什么是预处理呢？，如果全等旧没有必要进入核心的diff步骤了。除了全等比较，还会对他们进行前缀于后缀的比较。一眼就能看到这两段文本的头部和尾部分别有一段相同的内容。I am afrontI am abackTEXT2：back这是一种简化问题的方式，好处是可以在特定情况下能够轻松判断文本的插入和删除。TEXT3：TEXT4：too如果 TEXT3 是新的内容，那么只需要删除多余的 too 就可以完成文本更新；否则，添加 too 完成文本更新。
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
好好学习天天向上
06-09 3268
什么是DIff算法 当新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新操作，比较新旧的同层节点。用于比较的算法叫作Diff算法。Diff算法的分类DOM-diff的过程Diff算法的特点当数据发生改变，视图如何更新？ 当数据改变时，会触发，并且通过去通知所有订阅者，订阅者们就会调用方法，给真实DOM打补丁，更新相应的视图。 只有三种类型的节点会被创建并插入到DOM中patch方法的作用 1.对比两个vnode之间的差异 2.修改DOM节点，创建新增的节点、删除已经废弃的节点、修改需要更新
简单Diff算法
weixin_57214568的博客
07-25 53
简单diff算法思路
【vue设计与实现】双端Diff算法 1-双端比较的原理和优势
loyd3的博客
09-16 1012
前面介绍了简单Diff算法的实现原理，虽然简单Diff算法有很多有点，但是缺陷也很多，这些缺陷可以通过双端Diff算法解决简单Diff算法的问题在于，对DOM的移动操作并不是最优的，有时理论上只需要移动一次的DOM操作，使用简单Diff算法却移动了两次，而双端Diff算法就可以做到。顾名思义，双端Diff算法是一种同时对新旧两组子节点的两个端点进行比较的算法，因此需要四个索引值来分别指向新旧两组子节点的端点。
简单diff算法
willwe的博客
03-23 112
Diff算法part1--简单diff算法
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
React diff算法的实现示例
08-27
React diff算法的实现示例 React diff算法是React框架中的一种优化技术，用于减少DOM更新的性能损耗。以下是对React diff算法的实现示例的详细解释。 首先，我们需要了解为什么需要diff算法。在前一篇文章中，我们...
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
详解vue3.0 diff算法的使用(超详细)
01-19
尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持，proxy响应式原理，重新虚拟dom，优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码，并希望把其中的细节和奥妙和大家一起分享。...
VUE DIFF算法之简单DIFF
王亮的博客
02-10 380
vue 简单diff原理讲解及实践
VUE DIFF算法之双端DIFF
王亮的博客
02-11 644
VUE 双端DIFF原理讲解及实践练习
双端diff算法
黎小小的博客
10-27 169
如下图，如果使用简单diff算法真实 DOM 节点会，但是实际上通过简单的观察可以发现只需要移动一次p-3就可以。所以得出结论：简单diff算法的性能在某些场景下并不是最好的。对于上述的例子，使用双端diff算法的性能会更高。
深入研究前端框架中的Diff算法(Vue、React等等)
我们好像在哪见过
07-17 614
本文将深入探讨前端框架中的diff算法，重点关注Vue和React的diff算法，并介绍其他一些前端框架中的优化技术，包括Svelte、Incremental DOM、Mithril、Snabbdom、morphdom以及Preact。通过比较它们的原理和区别，帮助读者了解不同框架的优化方式，从而提高前端应用的性能和用户体验。
深入学习Vue.js（六）简单Diff算法
volit的博客
01-06 1189
如果使用上述代码执行，将会产生四次操作。而为了确定新老Node之间是否存在相同结点，就需要引入一个key作为标记,只要两个节点的type和key属性是一样的，那么我们就认为它们是相同节点，但是我们仍然还是要对两个节点进行打补丁的操作，因为节点的内容可能发生了变化。首先，以最基本的更新两组子节点的方法为例，通常我们会先将旧节点全部卸载，再安装所有的新节点，那么将会执行旧节点数量+新节点数量次。当新一组节点的长度大于旧节点时吗，将会有新节点被直接挂载，而当旧一组节点的长度大于新节点是，将会有节点被直接卸载。
一文搞懂Vue Diff算法
小王的技术库
12-14 1362
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
双端Diff算法
dfc_dfc的博客
01-22 1004
双端Diff算法分享
【前端必备】深入详解Vue2/Vue3 diff算法实现思路
最新发布
天天打码-16年老码农
02-04 1659
在做diff算法之前有个基本逻辑要明白，Vue的diff算法是同层比较，不会跨层比较，时间复杂度为O(N)。主要使用首尾比较法（头-头，头-尾，尾-头，尾-尾）。Vue2与Vue3的diff算法主要区别是处理完首尾节点后，对剩余节点的处理方式。
Git版本控制管理——diff
止步听风的博客
06-26 2937
Git中的diff命令可以显示文件之间的差异，同时-r选项可以遍历两个树对象，同时显示它们的差异。从Git中的对象类型上看，一个树对象值只代表版本库中的一个目录层级，它包含该目录下的直接文件和它的所有直接子目录的信息，但不包括所有子目录的完整内容。而树对象引用所有子目录的树对象，所以对应项目根目录的树对象实际上代表某个时刻的整个项目，因此也可以说，git diff遍历两棵树。存在三个可供树或类树对象使用git diff命令的基本来源：通常情况下，git diff命令进行树的比较时可以通过提交名，分支名或标签
深入学习Vue.js（七）双端Diff算法
volit的博客
01-08 474
简单Diff算法利用虚拟节点的key属性，尽可能地复用DOM元素，并通过移动DOM的方式来完成更新，从而减少不断地创建和销毁DOM元素带来的性能开销。而简单Diff算法的问题就在于，它的移动操作并不是最优的。而双端Diff算法，顾名思义，就是一种同时对新旧两组子节点的两个端点进行比较的算法。因此需要四个索引值，分别指向新旧两组子节点的两个端点。
简单diff与双端diff算法
09-18
简单diff算法是通过比较新节点数组和旧节点数组的节点，通过key来判断是否可以复用，并记录节点的相对位置是否发生变化。如果位置发生变化，则需要进行节点的移动操作。 双端diff算法的优势在于对于一些特殊情况能更快地处理节点，并且更贴合实际开发。双端diff算法通过两组子节点的头尾分别进行比较和更新，以实现节点的更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值