Diff算法

Posted 2023-04-06 GGxGx

什么是虚拟DOM

虚拟DOM是一个对象，一个什么样的对象呢？一个用来表示真实DOM的对象，要记住这句话。我举个例子，请看以下真实DOM：

<ul id="list">
    <li class="item">哈哈</li>
    <li class="item">呵呵</li>
    <li class="item">嘿嘿</li>
</ul>

上面的模版在转换成虚拟DOM后就是下面的内容

let oldVDOM =  // 旧虚拟DOM
    tagName: 'ul', // 标签名
    props:  // 标签属性
        id: 'list'
    ,
    children: [ // 标签子节点
        
            tagName: 'li', props:  class: 'item' , children: ['哈哈']
        ,
        
            tagName: 'li', props:  class: 'item' , children: ['呵呵']
        ,
        
            tagName: 'li', props:  class: 'item' , children: ['嘿嘿']
        ,
    ]

这样的 DOM 结构就称之为 虚拟 DOM (Virtual Node)，简称 vnode。
它的表达方式就是把每一个标签都转为一个对象，这个对象可以有三个属性：tag、props、children

• tag：必选。就是标签。也可以是组件，或者函数
• props：非必选。就是这个标签上的属性和方法
• children：非必选。就是这个标签的内容或者子节点，如果是文本节点就是字符串，如果有子节点就是数组。换句话说 如果判断 children 是字符串的话，就表示一定是文本节点，这个节点肯定没有子元素

这时候，我修改一个li标签的文本：

<ul id="list">
    <li class="item">哈哈</li>
    <li class="item">呵呵</li>
    <li class="item">测试哈哈哈哈哈</li> // 修改
</ul>

这时候生成的新虚拟DOM为：

let newVDOM =  // 新虚拟DOM
    tagName: 'ul', // 标签名
    props:  // 标签属性
        id: 'list'
    ,
    children: [ // 标签子节点
        
            tagName: 'li', props:  class: 'item' , children: ['哈哈']
        ,
        
            tagName: 'li', props:  class: 'item' , children: ['呵呵']
        ,
        
            tagName: 'li', props:  class: 'item' , children: ['测试哈哈哈哈哈']
        ,
    ]

为什么要使用虚拟 DOM 呢？ 看个图

如图可以看出原生 DOM 有非常多的属性和事件，就算是创建一个空div也要付出不小的代价。而使用虚拟 DOM 来提升性能的点在于 DOM 发生变化的时候，通过 diff 算法和数据改变前的 DOM 对比，计算出需要更改的 DOM，然后只对变化的 DOM 进行操作，而不是更新整个视图
在 Vue 里虚拟 DOM 的数据更新机制采用的是异步更新队列，就是把变更后的数据变装入一个数据更新的异步队列(patch)，用它来做新老 vnode 对比

Diff算法

上述操作中，其实只有一个li标签修改了文本，其他都是不变的，所以没必要所有的节点都要更新，只更新这个li标签就行，Diff算法就是查出这个li标签的算法。
总结：Diff算法在 Vue 里面就是叫做 patch，是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实DOM，进而提高效率。

Diff同层对比

新旧虚拟DOM对比的时候，Diff算法比较只会在同层级进行, 不会跨层级比较。 所以Diff算法是:深度优先算法。 时间复杂度:O(n)

Diff对比流程

当数据改变时，会触发setter，并且通过Dep.notify去通知所有订阅者Watcher，订阅者们就会调用patch方法，给真实DOM打补丁，更新相应的视图。
newVnode和oldVnode：同层的新旧虚拟节点

patch方法

这个方法作用就是，对比当前同层的虚拟节点是否为同一种类型的标签(同一类型的标准，下面会讲)：
是：继续执行patchVnode方法进行深层比对
否：没必要比对了，直接整个节点替换成新虚拟节点

sameVnode方法

patch关键的一步就是sameVnode方法判断是否为同一类型节点，那问题来了，怎么才算是同一类型节点呢？这个类型的标准是什么呢？
咱们来看看sameVnode方法的核心原理代码，就一目了然了

function sameVnode(oldVnode, newVnode) 
  return (
    oldVnode.key === newVnode.key && // key值是否一样
    oldVnode.tagName === newVnode.tagName && // 标签名是否一样
    oldVnode.isComment === newVnode.isComment && // 是否都为注释节点
    isDef(oldVnode.data) === isDef(newVnode.data) && // 是否都定义了data
    sameInputType(oldVnode, newVnode) // 当标签为input时，type必须是否相同
  )

patchVnode方法

这个函数做了以下事情：

• 找到对应的真实DOM，称为el
• 判断newVnode和oldVnode是否指向同一个对象，如果是，那么直接return
• 如果他们都有文本节点并且不相等，那么将el的文本节点设置为newVnode的文本节点。
• 如果oldVnode有子节点而newVnode没有，则删除el的子节点
• 如果oldVnode没有子节点而newVnode有，则将newVnode的子节点真实化之后添加到el
• 如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要

updateChildren方法

这是patchVnode里最重要的一个方法，新旧虚拟节点的子节点对比，就是发生在updateChildren方法中，就是首尾指针法，新的子节点集合和旧的子节点集合，各有首尾两个指针，举个例子：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
// 修改数据后
<ul>
    <li>b</li>
    <li>c</li>
    <li>e</li>
    <li>a</li>
</ul>

那么新旧两个子节点集合以及其首尾指针为：

然后会进行互相进行比较，总共有五种比较情况：
1、oldStart 和 newStart 使用sameVnode方法进行比较，sameVnode(oldStart, newStart)
2、oldStart 和 newEnd 使用sameVnode方法进行比较，sameVnode(oldStart, newEnd)
3、oldEnd 和 newStart 使用sameVnode方法进行比较，sameVnode(oldEnd, newStart)
4、oldEnd 和 newEnd 使用sameVnode方法进行比较，sameVnode(oldEnd, newEnd)
5、如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置。

接下来就以上面代码为例，分析一下比较的过程

分析之前，请大家记住一点，最终的渲染结果都要以newVDOM为准，这也解释了为什么之后的节点移动需要移动到newVDOM所对应的位置

第一步

oldStart = a, oldEnd = c
newStart = b, newEnd = a

比较结果：oldStart 和 newEnd 相等，需要把节点a移动到newE所对应的位置，也就是末尾，同时oldStart++，newEnd- -

第二步

oldStart = b, oldEnd = c
newStart = b, newEnd = e

比较结果：oldStart 和 newStart相等，需要把节点b移动到newStart所对应的位置，同时oldStart++,newStart++

第三步

oldStart = c, oldEnd = c
newStart = c, newEnd = e

比较结果：oldStart、oldEnd 和 newStart相等，需要把节点c移动到newStart所对应的位置，同时oldStart++,newStart++，oldEnd–

第四步 oldStart > oldEnd，则oldChildren先遍历完成了，而newChildren还没遍历完，说明newChlidren比oldChildren多，所以需要将多出来的节点，插入到真实DOM上对应的位置上

思考题
我在这里给大家留一个思考题哈。上面的例子是newChildren比oldChildren多，假如相反，是oldChildren比newChildren多的话，那就是newChildren先走完循环，然后oldChildren会有多出的节点，结果会在真实DOM里进行删除这些旧节点。大家可以自己思考一下，模拟一下这个过程，像我一样，画图模拟，才能巩固上面的知识。

附上updateChildren的核心原理代码

function updateChildren(parentElm, oldCh, newCh) 
  let oldStartIdx = 0, newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx
  let idxInOld
  let elmToMove
  let before
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) 
    if (oldStartVnode == null) 
      oldStartVnode = oldCh[++oldStartIdx]
     else if (oldEndVnode == null) 
      oldEndVnode = oldCh[--oldEndIdx]
     else if (newStartVnode == null) 
      newStartVnode = newCh[++newStartIdx]
     else if (newEndVnode == null) 
      newEndVnode = newCh[--newEndIdx]
     else if (sameVnode(oldStartVnode, newStartVnode)) 
      patchVnode(oldStartVnode, newStartVnode)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
     else if (sameVnode(oldEndVnode, newEndVnode)) 
      patchVnode(oldEndVnode, newEndVnode)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
     else if (sameVnode(oldStartVnode, newEndVnode)) 
      patchVnode(oldStartVnode, newEndVnode)
      api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
     else if (sameVnode(oldEndVnode, newStartVnode)) 
      patchVnode(oldEndVnode, newStartVnode)
      api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
     else 
      // 使用key时的比较
      if (oldKeyToIdx === undefined) 
        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
      
      idxInOld = oldKeyToIdx[newStartVnode.key]
      if (!idxInOld) 
        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
        newStartVnode = newCh[++newStartIdx]
      
      else 
        elmToMove = oldCh[idxInOld]
        if (elmToMove.sel !== newStartVnode.sel) 
          api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
         else 
          patchVnode(elmToMove, newStartVnode)
          oldCh[idxInOld] = null
          api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
        
        newStartVnode = newCh[++newStartIdx]
      
    
  
  if (oldStartIdx > oldEndIdx) 
    before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
    addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
   else if (newStartIdx > newEndIdx) 
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  

用index做key

平常v-for循环渲染的时候，为什么不建议用index作为循环项的key呢？
我们举个例子，左边是初始数据，然后我在数据前插入一个新数据，变成右边的列表

<ul>                      <ul>
    <li key="0">a</li>        <li key="0">测试</li>
    <li key="1">b</li>        <li key="1">a</li>
    <li key="2">c</li>        <li key="2">b</li>
                              <li key="3">c</li>
</ul>                     </ul>

按理说，最理想的结果是：只插入一个li标签新节点，其他都不动，确保操作DOM效率最高。但是我们这里用了index来当key的话，真的会实现我们的理想结果吗？废话不多说，实践一下：

<ul>
   <li v-for="(item, index) in list" :key="index"> item.title </li>
</ul>
<button @click="add">增加</button>

list: [
         title: "a", id: "100" ,
         title: "b", id: "101" ,
         title: "c", id: "102" ,
      ]
      
add() 
      this.list.unshift( title: "测试", id: "99" );
    

点击按钮我们可以看到，并不是我们预想的结果，而是所有li标签都更新了

为什么会这样呢？还是通过图来解释

按理说，a，b，c三个li标签都是复用之前的，因为他们三个根本没改变，改变的只是前面新增了一个测试

但是我们前面说了，在进行子节点的 diff算法 过程中，会进行 旧首节点和新首节点的sameNode对比，这一步命中了逻辑，因为现在新旧两次首部节点 的 key 都是 0了，同理，key为1和2的也是命中了逻辑，导致相同key的节点会去进行patchVnode更新文本，而原本就有的c节点，却因为之前没有key为4的节点，而被当做了新节点，所以很搞笑，使用index做key，最后新增的居然是本来就已有的c节点。所以前三个都进行patchVnode更新文本，最后一个进行了新增，那就解释了为什么所有li标签都更新了。

<ul>
   <li v-for="item in list" :key="item.id"> item.title </li>
</ul>

为什么用了id来当做key就实现了我们的理想效果呢，因为这么做的话，a，b，c节点的key就会是永远不变的，更新前后key都是一样的，并且又由于a，b，c节点的内容本来就没变，所以就算是进行了patchVnode，也不会执行里面复杂的更新操作，节省了性能，而测试节点，由于更新前没有他的key所对应的节点，所以他被当做新的节点，增加到真实DOM上去了。

React diff算法

文章目录

• diff算法
• • 三大策略
  • key的作用
  • index和id作为key的区别

diff算法

传统diff 对比 react diff：

传统的diff算法追求的是“完全”以及“最小”，而react diff则是放弃了这两种追求

在传统的diff算法下，对比前后两个节点，如果发现节点改变了，会继续去比较节点的子节点，一层一层去对比。就这样循环递归去进行对比，复杂度就达到了o(n3)，n是树的节点数，想象一下如果这棵树有1000个节点，得执行上十亿次比较，这种量级的对比次数，时间基本要用秒来做计数单位。

其实 React 的 virtual dom 的性能好也离不开它本身特殊的diff算法。传统的diff算法时间复杂度达到o(n³)，而 react 的 diff算法 时间复杂度只是o(n)，react的 diff 能减少到o(n)依靠的是react diff的三大策略。

三大策略

---

1、tree diff：Web UI 中DOM节点跨层级的移动操作特别少，可以忽略不计

React 对 Virtual DOM树 进行层级控制，只会对 相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n)

如果DOM节点出现了跨层级操作，diff处理方式：

如下图所示，A节点及其子节点被整个移动到D节点下面去，由于React只会简单的考虑同级节点的位置变换，而对于不同层级的节点，只有创建和删除操作，所以当根节点发现A节点消失了，就会删除A节点及其子节点，当D发现多了一个子节点A，就会创建新的A作为其子节点。

由此可以发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是会进行删除，重新创建的动作，这是一种很影响React性能的操作。因此官方也不建议进行DOM节点跨层级的操作。

---

2、component diff：拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构

最核心的策略还是看结构是否发生改变。React是基于组件构建应用的，对于组件间的比较所采用的策略也是非常简洁和高效的

• 如果是 同一个类型 的组件，则按照原策略进行Virtual DOM比较。
• 如果是 不同类型 的组件，则将其判断为dirty component，从而替换整个组价下的所有子节点。
• 如果是 同一个类型 的组件，有可能经过一轮Virtual DOM比较下来，并没有发生变化。如果能够提前确切知道这一点，那么就可以省下大量的diff运算时间。因此，React允许用户通过shouldComponentUpdate() 来判断该组件是否需要进行 diff算法分析。

如下图所示，当组件D变为组件G时，哪怕这两个组件结构相似，一旦React判断D和G是不用类型的组件，就不会比较两者的结构，而是直接删除组件D，重新创建组件G及其子节点。也就是说，如果当两个组件是不同类型但结构相似时，其实进行diff算法分析会影响性能，但是毕竟不同类型的组件存在相似DOM树的情况在实际开发过程中很少出现，因此这种极端因素很难在实际开发过程中造成重大影响。

---

3、element diff：对于同一层级的一组子节点，它们可以通过唯一id或者key 进行区分

当节点属于同一层级时，diff提供了3种节点操作，分别为INSERT_MARKUP(插入)， MOVE_EXISTING(移动)，REMOVE_NODE(删除)

操作	描述
插入	新节点不存在于旧集合当中，即全新的节点，就会执行插入操作
移动	新节点在旧集合中存在，并且只做了位置上的更新，就会复用之前的节点，做移动操作，可以复用以前的DOM节点。
删除	新节点在旧集合中存在，但节点做出了更改不能直接复用，做出删除操作。或者旧节点不在新集合里的，也需要执行删除操作

key的作用

问题：react中的 key 有什么作用？（key的内部原理是什么？）

虚拟DOM中key的作用：

• 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用
• 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行 【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
  • 1、 旧虚拟DOM中找到与新虚拟DOM相同的key：
    • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
    • 若虚拟DOM中内容变了,则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  • 2、 旧虚拟DOM中未找到与新虚拟DOM相同的key：
    • 根据数据创建新的真实DOM，随后渲染到到页面

index和id作为key的区别

class Person extends React.Component {
    state = {
        persons: [
            { id: 1, name: '小张', age: 18 },
            { id: 2, name: '小李', age: 19 },
        ]
    }
    add = () => {
        const { persons } = this.state
        const p = { id: persons.length + 1, name: '小王', age: 20 }
        this.setState({ persons: [p, ...persons] })
    }
    render() {
        return (
            <div>
                <h2>展示人员信息</h2>
                <button onClick={this.add}>添加一个小王</button>
                <h3>使用index（索引值）作为key</h3>
                <ul>
                    {
                        this.state.persons.map((personObj, index) => {
                            return <li key={index}>{personObj.name}---{personObj.age}<input type="text" /></li>
                        })
                    }
                </ul>
                <hr />
                <hr />
                <h3>使用id（数据的唯一标识）作为key</h3>
                <ul>
                    {
                        this.state.persons.map((personObj) => {
                            return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text" /></li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

ReactDOM.render(<Person />, document.getElementById('test'))

执行结果：

慢动作回放----使用index索引值作为key：

初始数据：
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
初始的虚拟DOM：
            <li key=0>小张---18<input type="text"/></li>
            <li key=1>小李---19<input type="text"/></li>

更新后的数据：
            {id:3,name:'小王',age:20},
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
            <li key=0>小王---20<input type="text"/></li>
            <li key=1>小张---18<input type="text"/></li>
            <li key=2>小李---19<input type="text"/></li>
id为1和2的数据进行重新渲染，效率降低，并引发错误的Dom更新问题

---

慢动作回放----使用id唯一标识作为key：

初始数据：
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
初始的虚拟DOM：
            <li key=1>小张---18<input type="text"/></li>
            <li key=2>小李---19<input type="text"/></li>

更新后的数据：
            {id:3,name:'小王',age:20},
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
            <li key=3>小王---20<input type="text"/></li>
            <li key=1>小张---18<input type="text"/></li>
            <li key=2>小李---19<input type="text"/></li>
id为1和2的数据进行复用，并没有重新渲染，提高了效率

用index作为key可能会引发的问题：

1. 若对数据进行 逆序添加、逆序删除等破坏顺序操作:
   会产生 没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还 包含输入类的DOM：
   会产生 错误DOM更新 ==> 界面有问题。
3. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key:

1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
2. 如果确定只是简单的展示数据，用index也是可以的。