vue 和 react 在 虚拟dom的diff上，做了哪些改进使 速度更快？

本文参考： 原文链接：https://blog.csdn.net/hubert39641020/article/details/127042067?spm=1001.2014.3001.5502

1、传统diff

计算两颗树形结构差异并进行转换，传统diff算法是这样做的：循环递归每一个节点 。传统diff算法复杂度达到O(n^3 )这意味着1000个节点就要进行数10亿次的比较，这是非常消耗性能的。react大胆的将diff的复杂度从O(n^3)降到了O(n)

1.vue的diff算法

diff算法发生在虚拟dom上

判断是否同一个节点：selector和key都要一样

diff规则：

1. 只比较同层的节点，不同层不做比较。删除原节点，并且新建插入更新节点（实际开发中很少遇到）
2. 新旧节点是同层节点，但不是同一个节点，不做精细化比较。删除原节点，并且新建插入更新节点（实际开发中很少遇到）
3. 新旧节点是同层节点，也是同一个节点，需要做精细化比较

2.react的diff算法

从左往右依次对比，利用元素的index和标识lastIndex进行比较，如果满足index < lastIndex就移动元素，删除和添加则各自按照规则调整

跨层不比较，同层比较，跟vue一样

diff策略

新节点的位置是lastIndex，旧节点的位置是index。从新的节点中依次读取节点索引，对比旧的节点数据索引

1. 不满足 index < lastIndex 的条件，不移动；满足 index < lastIndex 的条件，移动节点。
2. 每一次比较都需要重新设置 lastIndex=(index,lastIndex)中的较大数
3. 移动的节点在前一个被操作的节点后面
4. 如果从新的节点集合获取的节点在旧节点集合未找到，就是新增，lastIndex为上一次的值不变
5. 如果新的节点集合遍历完了，旧节点还有值就是删除，loop删除掉就行

最恶心的情况：如果把最后一个元素移到最前面，react会依次移动节点向后

3.对比

相同点：

Vue和react的diff算法，都是不进行跨层级比较，只做同级比较。

不同点：

1.Vue进行diff时，调用patch打补丁函数，一边比较一边给真实的DOM打补丁
2.Vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建，而react则认为是同类型节点，进行修改操作
3.① Vue的列表比对，采用从两端到中间的方式，旧集合和新集合两端各存在两个指针，两两进行比较，如果匹配上了就按照新集合去调整旧集合，每次对比结束后，指针向队列中间移动；
②而react则是从左往右依次对比，利用元素的index和标识lastIndex进行比较，如果满足index < lastIndex就移动元素，删除和添加则各自按照规则调整；
③当一个集合把最后一个节点移动到最前面，react会把前面的节点依次向后移动，而Vue只会把最后一个节点放在最前面，这样的操作来看，Vue的diff性能是高于react的