diff算法

149 阅读2分钟

什么是diff算法?

diff算法是虚拟dom的算法

diff算法就是进行虚拟节点的比较,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom

在虚拟DOM树上从上到下进行同层比对。不同层级的节点只有创建和删除操作。给列表结构的每个单元添加唯一的key属性,方便比较。如果上层已经不同了,那么下面的dom树会重新渲染。这样的好处是算法简单,减少比对速度,加快算法完成速度

diff算法的特点:

  • 比较只会在同层级之间进行比较,不会跨层级比较
  • 在diff算法比较的过程中,循环只会从两边到中间比较

diff执行时刻: 组件实例执行其更新函数时,他会对比上一次渲染结果oldvnode的新的渲染结果newvnode,此过程称为patch

diff过程整体遵循深度优先,同层比较策略,两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作,比较俩组节点是算法的重点,假设头尾节点可能相同会做四次对比尝试,如果没有相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下节点,借助key通常可以非常精确找到相同节点

diff算法的步骤: 用javascript对象结构表示dom树的结构,然后用这个对象树去构建真正的dom树,插入到文档当中,当状态改变的时候,重新构建一个新的对象树,新的对象树和旧的对象树进行比较(diff),记录两颗对象树之间的差异(patch),然后把所记录的差异应用到第一颗对象树所构建的真正的dom树上,视图就更新了。