diff算法深度解析（个人笔记）

简介：diff算法其实是一个通用的概念，用于比较两个文本或数据结构之间的差异

用途：对比新旧虚拟dom，来达到局部更新真实dom

核心算法：

     介绍根据需求使用不同的算法例如：

       （1）文本类（git等文本工具使用的LCS）

              1.最长公共子序列算法，通过把文件拆成字符，然后给他存在一个2*2规划表格，然后动态的填写这个表格，通过比较两个文本文件的每一行（或字符），根据相似度进行填充动态规划表格。如果当前行（或字符）匹配，则在表格中对应位置的值为左上角元素的值加1；如果不匹配，则取左方格和上方格中较大的值填充。

   |   | B | D | C | A | B |
  --|---|---|---|---|---|---|
    | 0 | 0 | 0 | 0 | 0 | 0 |
  A | 0 | 0 | 0 | 0 | 1 | 1 |
  B | 0 | 1 | 1 | 1 | 1 | 2 |
  C | 0 | 1 | 1 | 2 | 2 | 2 |
  B | 0 | 1 | 1 | 2 | 2 | 3 |
  D | 0 | 1 | 2 | 2 | 2 | 3 |
  A | 0 | 1 | 2 | 2 | 3 | 3 |
  B | 0 | 1 | 2 | 2 | 3 | 4 |

左方格和上方格中较大的值填充。

        （2）虚拟DOM比较算法（vue,react等使用）

                1.react使用顺序比较算法，它通过递归地比较新旧元素树的结构和属性，尽量减少实际DOM操作的次数，vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。

        react-diff: 双端对比（列表顺序变化会损失性能）

                2.vue使用的双指针算法，Vue 会找出两棵树的差异，并且尽可能地以最小的代价更新到真实 DOM。Vue 会尽量复用已存在的 DOM 元素，而不是直接替换整个元素。vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个

        vue-diff: 双指针方式对比（潜逃过深的节点结果会导致算法性能下降）