【每天一个知识点】dom-diff原理以及 算法的妙用（最长子序列）

DOM-diff是面试题当中经常遇到的一个考点，也可以说是vue和react里面的精华所在之一。
那么这篇文章我想通俗易懂的方式简单的解答一下整个过程。

要知道dom-diff 就要先知道虚拟dom
1.为什么说是数据驱动页面？
我们都知道vue和react都是用数据驱动页面的应用，那么他的原理到底是？
答：由于dom流式布局的原因，平常我们操作一次dom就要重新布局一次，所以vue和react推出的数据驱动页面的操作，就是创建一个虚拟的dom对象，所有的操作都只是修改这个虚拟dom，最后再一起进行布局，从而减少dom渲染的次数。
虚拟dom大致长这样：

{
	type:’节点类型‘, //ul,div,li,text等等
	children:[], //当前节点包含的子节点集合,内部结构也是虚拟DOM节点组成的数组
	props:{}, //属性键值对
}

创建一个下图的dom 通过createElement，appendChild实现的代码大概如下

let virtualDom1 = createElement('ul', { class: 'list'}, [
  createElement('li', { class: 'item', ['a']}),
 createElement('li', { class: 'item', ['b']}),
 createElement('li', { class: 'item', ['c']}),
])

那么虚拟dom对象和虚拟dom转换成真实dom的方式我们知道了，这个diff又是什么？
答：当虚拟dom比较庞大时，在只修改了一点点的情况就要重新渲染整个dom，会非常耗性能，diff算法就是对比新修改的虚拟dom的不同点，只针对不同点进行修改，从而减少性能消耗。

DOM-DIFF就是一种比较算法,比较两个虚拟DOM的区别，也就是比较两个对象的区别。
也有真实DOM与虚拟DOM的比较，不过我们这里先只讨论虚拟DOM之间的比较。

DOM-DIFF的过程
DOM-DIFF作用是通过js层面的计算，根据两个虚拟对象创建出差异的补丁对象patch，用来描述改变了哪些内容，然后用特定的操作解析patch对象，更新dom完成页面的重新渲染。
那我们按照下图的变更来实现一个DOM-diff的过程：
大致就是这么个对方算法操作 详细深入可以看这篇文章diff算法的步骤详解

我们了解diff后，在深入点，问你diff里面用的算法？该怎么答？
答：diff算法的基本算法就是用了最长上升子序列这个算法，涉及了算法题的范畴了，但多懂一点是好事：详细参考：最长上升子序列详解