必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-06-10 15:45:16来源:IT技术作者:seo实验室小编阅读:75次「手机版」
 

diff

文章整理自阿里云栖视频

这里写图片描述

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只需要移动位置即可。

相关阅读

matlab中遗传算法求最优解

首先什么是遗传算法:一个非常好的理解遗传算法的例子 强烈推荐入门  遗传算法的手工模拟计算示例 为更好地理解遗传算法的运算过

AI产品经理必懂算法:决策树

决策树(Decision Tree)是一种以树形数据结构来展示决策规则和分类结果的模型,它是将看似无序、杂乱的已知实例,通过某种技术手段将它

scikit-learn之聚类算法之Mean Shift

Mean Shift 算法通过更新质心的候选位置为 所选定区域 的偏移均值。 然后,这些候选者在后处理阶段被过滤以消除近似重复,从而形成最

【GA算法】遗传算法原理及其Matlab代码

翻阅几篇遗传算法的文章,这篇通俗易懂,且逻辑清楚,最适合入门,不用担心遗漏关键点。 遗传算法,先选择,交叉和变异顺序可更换。 轮盘赌部

FFT算法原理

非周期性连续时间信号x(t)的傅里叶变换可以表示为式中计算出来的是信号x(t)的连续频谱。但是,在实际的控制系统中能够得到的是连续

分享到:

栏目导航

推荐阅读

热门阅读