非常简单易懂的DOM Diff算法简析

xiaoxiao2025-08-04  32

版权声明:本文为博主原创文章,转载请注明出处    https://blog.csdn.net/one_girl/article/details/81086289 文章整理自阿里云栖视频 

DIFF算法在执行时有三个维度,分别是Tree DIFF、Component DIFF和Element DIFF,执行时按顺序依次执行,它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。    Tree DIFF是对树的每一层进行遍历,如果某组件不存在了,则会直接销毁。如图所示,左边是旧属,右边是新属,第一层是R组件,一模一样,不会发生变化;第二层进入Component DIFF,同一类型组件继续比较下去,发现A组件没有,所以直接删掉A、B、C组件;继续第三层,重新创建A、B、C组件。    如图所示,第一层遍历完,进行第二层遍历时,D和G组件是不同类型的组件,不同类型组件直接进行替换,将D删掉,再将G重建。    Element DIFF紧接着以上统一类型组件继续比较下去,常见类型就是列表。同一个列表由旧变新有三种行为,插入、移动和删除,它的比较策略是对于每一个列表指定key,先将所有列表遍历一遍,确定要新增和删除的,再确定需要移动的。如图所示,第一步将D删掉,第二步增加E,再次执行时A和B只需要移动位置即可。 ---------------------  作者:一个慢  来源:  原文:https://blog.csdn.net/one_girl/article/details/81086289  版权声明:本文为博主原创文章,转载请附上博文链接!

转载请注明原文地址: https://www.6miu.com/read-5034270.html

最新回复(0)