diff算法

什么是diff算法

diff算法是比较新老两个虚拟dom树的的方法,使用它比直接遍历比较两棵树更加高效

• 目的:
  为了最大程度上实现dom的复用,减小dom操作.
• 过程: 两个节点开始比较,判断是否同一节点,如果是,进行属性比较,判断是否有子节点,子节点进行diff 如果新的有,老的没有.就增加

比较子节点的过程:
本质是快速的比较两个数组.
因为web大多数情况下,子节点不会发生剧烈的顺序变化因此可以不用每次都循环比较.可以在循环比较前加一些判断
给新老节点 首尾加上索引
判断过程 伪代码

  let  oldStart=0;
  let  oldEnd = oldChildren[oldChildren.length -1]
  let  newStart = 0;
  let  newEnd = newChildren[newChildren.length -1]

  while(oldStart > oldEnd || newStart > newEnd){
        //四种常见的情况
        if(oldStart == newStart){ //== 表示isSame
            pach(node)
            newStart++;
            oldStart++
        }
       else if(oldStart == newEnd){
            pach(node)
            oldStart++;
            newEnd--
        }else if(oldEnd == newStart){
            pach(node)
            oldEnd --;
            newStart++
        }else if (oldEnd == newEnd){
            pach(node)
            oldEnd--
            newEnd--
        }else{
            for(let i = 0; i <oldChildren,length;i++){
                if(newStart.isSame(oldChildren[i])){
                    newStart++;
                    oldChildren[i].moveFirst()
                }
            }

        }

  }