虚拟DOM与diff算法

1) 虚拟DOM

虚拟DOM（Virtual dom），也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。

2) 使用虚拟节点的好处

频繁的操作DOM，会大量的造成页面的重绘和回流，出于性能优化的考虑，我们应该减少重绘和回流的操作。

重绘：例如 div1.style.color=‘red’ 这种代码，只能改变颜色，并不会影响其他元素的布局，这种操作被称为重绘。

回流：例如 div1.style.padding = ‘20px’ 这种代码，会影响到其他元素的布局，这种操作被称为回流。

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。

对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真实DOM上，只触发一次重绘和回流。

解析：我们通过虚拟DOM就不用因为每次的改变就渲染/重绘页面一次，只需要在最终一次改变后操作真实节点，才会重绘，达到仅重绘一次。就比如上面的程序，我们创建一个虚拟DOM命名为temp，在改变的过程都是对temp进行操作，直到改造完成才对真实节点(ul1) 进行操作渲染页面。

3) DIFF算法

DIFF算法是DOM更新的一种算法，指页面被更新时，程序用哪种策略去做更新DOM。

对于diff算法，这里举个例子：假设下面的数字都代表一个 li 元素，更新前的 li 元素有 1 2 3 4 5 6 7 8 9，更新后的 li 元素 有 1 5 12 7 10 3 4 8 9 2 11。那么diff算法过程是这样的——

比较第一个都是1即同一个元素，没有变化，不做处理

比较2和5，不一致，再看 9和11不一致，交叉比较2和11，5和9都不一致。都不一致之后 更新后的5在更新前的 3 4 5 6 7 8即排除首尾，在中间的这些元素寻找匹配，很明显能在中间找到5，就把5提出来放在1后面即原本2的位置，2和2后面的元素往后退，变成 1 5 2 3 4 5 6 7 8 9。

比较2和12，不一致，再比较9和11不一致，比较 12和9，2和11都不一致，在3 4 5 6 7 8中也找不到，则新增一个 12 的 li元素 到第三个位置——2和其后面元素往后退

以此类推就会变成更新后的结果…………总而言之diff算法就是通过比较异同来更新DOM