虚拟dom及diff算法

1.真实dom的工作流程

创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

2.真实dom的缺点

每一次改变页面内的dom节点，都会遍历整个dom树。效率低下，浪费资源。

3.虚拟dom本质

虚拟dom的本质就是一段js对象，因此可以跨平台运行。是对真实dom的一个映射。缺点是第一次渲染会变慢。

4.虚拟dom实现

使用虚拟dom的话就要使用snabbdom库，因此我们要在js中先引入snabbdom库。

const snabbdom = window.snabbdom

之后，将vnode（虚拟节点插入空的容器中）

const patch = snabbdom.init( [
    snabbdom_class,
    snabbdom_props , 
    snabbdom_style , 
    snabbdom_eventlisteners
])

创建vnode(虚拟节点)

const h = snabbdom.h

创建空的容器

const container = document.getElementById('container')

创建vnode

const vnode = h('ul#list', {}, [
    h('li.item', {}, '第一项'),
    h('li.item', {}, '第二项'),
])

将vnode放入空容器里

patch( container, vnode)

5.diff算法

（1）逐层判断，判断的时候比较val和key两个值，如果一样，代表有比较节点的必要，开始比较，不一样，就直接替换。
（2）一样的话，开始比较新旧节点，按照新节点的顺序排列，如果新节点的第一个不存在，则在旧节点创建一个，存在，则将旧节点中该结点移动到第一位，后面以此推。                                             或者说是，遍历新节点，每一个节点都与旧节点中所有节点比较一次。如果旧节点中有和该节点一样的节点，就直接拿过来用，避免重新创建。没有的话就重新创建。