虚拟DOM中的diff算法

什么是虚拟DOM，它的优点

大家知道，我们页面渲染，首先需要构建一个DOM树，用render进行DOM的渲染，传统开发中，每当DOM树中的元素发生改变，都需要重新进行一遍DOM的比对，并且进行真实DOM的渲染，这样是非常损耗性能的。

那么虚拟DOM实际上就是一个JS对象，用来描述真实DOM，如果操作中有多次更新DOM的动作，会用diff算法进行比对，根据新的内容生成一个新的虚拟DOM（createElement），最终把这个虚拟DOM一次性attch到DOM树上，这样就大大节省了性能。虽然看起来新增了一个操作（创建虚拟DOM），但是在js中，js对象的创建是非常不损耗性能的，但是DOM树的渲染却非常损耗性能。

Diff算法

虚拟DOM比对中用到了diff算法，diff实际上就是diffrence的意思，就是做对比找差异，diff算法中有一个很重要的原理就是同级比对，如两个虚拟DOM树中，div1与div1做比对，div2与div2做比对，互不干涉，这样就减少了一个循环查找对应dom节点的一个操作，非常节省性能，提高了页面渲染的效率。

那么为什么diff算法能达到这种效果，不用在DOM树逐个查找，这是因为Diff算法给虚拟DOM树给每个DOM节点增加了key值，如图：第一种情况，我们需要逐个比对，才知道增加的是哪个DOM节点，第二种情况加上key值，我们可以直观的感受到，增加了z这个DOM节点。

patch函数

diff和patch是一对工具，diff比较两个虚拟DOM的差异，并记录下来，生成一个diff文件，也就是我们常说的patch(补丁)文件。

patch能降diff文件运用原来的两个集合之一，从而得到另一个集合。举个例子来说文件A和文件B,经过diff之后生成了补丁文件C,那么着个过程相当于 A -B = C ,那么patch的过程就是B+C = A 或A-C =B。
因此我们只要能得到A, B, C三个文件中的任何两个，就能用diff和patch这对工具生成另外一个文件。