关于diff算法的理解随记

本文解析了如何使用diff算法比较两个DOM树结构,通过实例说明了从旧DOM(124 abd)到新DOM(1342 acdb)的更新过程,最终结果为1342。重点在于节点移动和插入操作的算法实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文 https://juejin.cn/post/6844903607913938951

看了上面diff文章,自己记一下理解,有错欢迎指正

// 这里是第一组
124
abd
// 这里是第二组
1342
acdb

每一组就是一个dom,第一组为 oldDom,第二组为newDom

两个dom比较,从两边向中间比较
第一次 第一组的 frist=1 last=4
第一次 第二组的 frist=1 last=2 

第一次比较中,两组的第一个值相同,位置不变,后面不同,先不管,
此时最终更新的dom为124

第二次中,第一个值已经确定,就不考虑,往后顺位
24
bd

342
cdb
第二次 第一组的 frist=2 last=4
第二次 第二组的 frist=3 last=2 
第二次比较,一组的第一个值与二组的最后一个值相同,因为他们都是自身组的最后一个值,所以相同的值 2 就是新dom的最后一个值,最终更新的dom为 142
至此一组的所有值已经遍历过一遍,最后再将第二组还有的值根据自身的index插入到新的dom中 , 没遍历的值 有c ,它自身的index为2
那么最终的dom为1342
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值