上一篇文章中，DOM树的信息可以用JavaScript对象来表示，反过来，可以根据这个用JavaScript对象表示的树结构来真正构建一颗DOM树。
用JavaScript对象表示DOM信息和结构，当状态变更的时候，重新渲染这个JavaScript的对象结构，当然这样做，其实并没有更新到真正的页面上。
但是可以用新渲染的对象树和旧的树进行对比，记录这两棵树的差异。记录下来的不同就是我们需要对页面真正的DOM操作，然后把它们应用在真正的DOM树上，页面才会真正变更。
Virtual DOM算法的实现步骤
1.用JavaScript对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，插到文档中。
2.当状态变化的时候，重新构建一颗新的对象树，然后用新的树和旧的树进行比较，记录两颗树的差异。
3.把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
Virtual DOM实质上是在JS和DOM之间做了一个缓存，可以类比cpu和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存，既然DOM这么慢，就在它们JS和DOM之间加个缓存。CPU（JS）只操作内存（Virtual DOM）,最后的时候再把变更写入硬盘（DOM）。
步骤一：见前一篇博客
步骤二：比较两颗虚拟DOM树的差异
1.深度优先遍历，记录差异
在实际的代码中，会对新旧两颗树进行一个深度优先的遍历，这样每个节点都会有一个唯一的标记。
在深度优先遍历的时候，每当遍历到一个节点的时候就会和新的DOM树进行比较，如果有差异，就会记录到一个对象里面。
2.这里会涉及到差异类型
（1）替换掉原来的节点，例如把上面的div换成了section
（2）移动、删除、新增子节点
（3）修改节点的属性
（4）对于文本节点，文本内容可能会改变。
步骤三：把差异引用到真正的DOM树上
因为步骤一所构建的JavaScript对象树和render出来的真正的DOM树的信息、结构是一样的。所以我们可以对那颗DOM树也进行深度优先遍历，遍历的时候从步骤二生成的差异对象中找出当前遍历的节点差异，然后进行DOM操作。
