Diff算法的作用:比较新旧节点,找到可复用的节点,比对进行增删移的操作,节省性能。

简单Diff算法:

        实现:通过虚拟节点的key属性找到可复用的节点,找到了就记录该索引,设为最大索引,通过DOM移动后续小于该索引的节点。类似冒泡排序。        

双端Diff算法:

        实现:标记新旧两组节点的各自首尾节点,将其标记为新头,新尾,旧头,旧尾,与相对的首尾节点互相比较(例如新头和旧头旧尾比对,旧尾和新头新尾比对),都没找到相同的节点就将新头与旧头旧尾之间的节点进行比对,例如旧三和新头一样,那么就把旧三移到顶部,然后旧三和新头不参与后续比对,将新二设为新头,继续与相对的首尾节点互相比较,如果发现了相同节点,就根据key属性将旧节点移动到新节点对应的位置,然后以此类推。

        而需要增加新元素的情况则全部比对完进行if判断(旧头key > 旧尾key & 新头key <= 新尾key),将剩下的新头和新尾之间的遍历挂载到旧头处。

        删除没有的元素就简单了,就是上面if的else情况(旧头key <= 旧尾key & 新头key > 新尾key),将剩下的旧头和旧尾之间的遍历删除。

快速Diff算法:

        概述:先处理新旧两组节点中相同的前置和后置节点,然后将中间相同且连续的新旧节点设置一个递增序列,然后移动其他的节点完成更新。