虚拟DOM和diff算法

虚拟DOM（Virtual dom），也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。
为什么要使用虚拟DOM呢，因为操作真实DOM的耗费的性能代价太高，频繁的操作DOM，会大量的造成页面的重绘和回流，出于性能优化的考虑，我们应该减少重绘和回流的操作。对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真实DOM上，只触发一次重绘和回流。
我们都知道Vue是基于数据驱动的，数据变化之后，不会像jQuery那样进行页面全部节点的渲染，而是进行局部节点的渲染。
那如何判断哪个节点变化呢，利用的就是虚拟DOM和真实DOM的对比，而对比的方法就是diff算法。
为了实现虚拟DOM，我们需要通过JS把每种DOM抽象成对象，每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，先比较该节点类型，假如节点类型不一样，就直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么就判定该节点有更新，重新渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点。

// 创建虚拟节点
var temp = document.createDocumentFragment();

for( var i=0; i<100; i++ ){
    var li = document.createElement('li');
    // 将li放入虚拟节点中，这一步操作不会产生重绘回流
    temp.appendChild(li);
    li.innerHTML = i;
}

// 真实节点的操作
ul1.appendChild(temp);