虚拟DOM

相对于DOM对象，原生的JavaScript对象处理起来更快，而且更简单，因此我们可以使用JavaScript对象来表示DOM树上的结构信息。

JavaScript对象

var element = {
    tagName: 'ul',
    props: {
        id: 'list'
    },
    children: {
        {
            tagName: 'li',
             props: {
               class: 'item'
             },
             children: ['Item1']
        },
        {
         tagName: 'li',
         props: {
           class: 'item'
         },
         children: ['Item1']
        },
        {
         tagName: 'li',
         props: {
           class: 'item'
         },
         children: ['Item1']
        }
    }
}

上面对象使用html表示就是：

HTML

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

Virtual DOM的本质就是在JS和DOM之间做一个缓存，可以类比CPU和硬盘，既然硬盘这么慢，我们就也在他们之间添加一个缓存； 既然DOM这么慢，我们就可以在JS和DOM之间添加一个缓存。 CPU（JS）只操作内存（虚拟DOM），最后的时候在把变更写入硬盘（DOM）。

diff算法

1.深度遍历优先，记录差异

在深度优先遍历的时候，每遍历到一个节点就把该节点和新的树进行对比，如果有差异的话就记录到一个对象里面。
2.差异类型
3.列表对比算法
4.把差异引用到真正的DOM树上