diff算法小解析

置顶刚刚好吧

于 2019-12-02 11:09:50 发布

阅读量451

点赞数

文章标签： diff 虚拟dom

本文链接：https://blog.youkuaiyun.com/qq_41339192/article/details/103344455

版权

本文深入解析Diff算法在虚拟DOM中的应用，介绍DOM概念及其在页面渲染中的角色。详细阐述了diff算法如何通过treediff、componentdiff和elementdiff三个阶段，高效对比并更新新旧DOM树，提升页面渲染性能。

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

1、DOM概念

	我们所见的页面，是由一个一个的标签渲染到页面的，在虚拟dom
会将整个页面结构视为一颗dom树，并且提供的新旧dom树，可以进行
对比，以提高dom渲染性能

2、diff算法

	diff（different）算法对比新旧dom树，用新dom修改后的地方
替换对应旧dom的地方

作用：遍历dom树，由上至下遍历，对比新旧dom树，遍历一遍之后，
就会找出新旧dom树中的不同的地方

作用：在tree diff遍历dom树的时候，进行组件对比，找出旧dom树
的变化的组件，此时
如果新旧dom树的组件对应组件类型不同，则会移除旧组件，将新组件
添加到页面
如果新旧dom树的组件对应组件类型相同，则会暂时将此组件认为是不
需要更新的组件

作用：在进行component diff的组件对比时,会遍历该组件中的元素,
对比新旧dom树中的该元素，此为元素级别的对比