初学者虚拟DOM与snabbdom库了解

1. 什么是虚拟DOM?

• 虚拟DOM就是使用js对象模型来模拟真实DOM节点

2. 什么是diff算法？

• 思维： diff算法起初来源于后端，用于比较两个文件的差异，

3.为什么要用虚拟DOM?
因为在真实项目中，操作dom节点是很正常的，因为要渲染页面，然而，其实操作dom节点次数越多，加载的会越慢，损耗的资源越大，这让一个用户的体验会降低，我们来看下面这段代码，让你体会操作虚拟dom会比真实dom的效率高多少。

以下是结果：

可以看到差距，同样是循环一百万，如果直接操控真实dom要花三十多秒，当然每个计算机得出的时间可能不一样，因为cpu处理效果不一样吗，而如果操控数据，再最后渲染到真实dom上一秒都不到，结果都一样，可想而知，频繁的操控dom节点损耗的资源会有多大。
当我们打开一个页面，你等了四五秒还没出来，我想你就会感觉很不好了，而在项目中请求数据，获取图片资源等等，如果再加上这样频繁的操作真实dom节点，我想说，那打开页面加载的时间所花费的时间可想而知了，而如果我们讲一个真实dom结构用数据虚拟的创建出来，最后在一次的渲染出来，会不会效果非常好
而snabbdom就是一个第三方的虚拟dom库
这个库中使用的话上手还是容易的，一个h函数生成vdom(虚拟节点)
var vnode = h(‘div#container.two.classes’, {on: {click: someFn}}, [
h(‘span’, {style: {fontWeight: ‘bold’}}, ‘This is bold’),
’ and this is just normal text’,
h(‘a’, {props: {href: ‘/foo’}}, ‘I’ll take you places!’)
]);
var newVnode = h(‘div#container.two.classes’, {on: {click: anotherEventHandler}}, [
h(‘span’, {style: {fontWeight: ‘normal’, fontStyle: ‘italic’}}, ‘This is now italic type’),
’ and this is still just normal text’,
h(‘a’, {props: {href: ‘/bar’}}, ‘I’ll take you places!’)
]);
一个patch函数进行diff算法获取两个vdom(虚拟dom)中的差异对象，然后在渲染到真实dom上;
patch(vnode, newVnode)
以上这几段代码在snabbdom的示例中截取的
diff算法是如何比较的呢，假设把vdom(虚拟dom)说成一个dom树，那么diff通过两个vdom(虚拟dom)每一层来进行对比，就类似于古时候的兵对兵，将对将，同层比较，当发现不一样时，就生成一个差异对象，其它的相同的则不变，最后再讲这个差异的部分渲染出去。
这种使用vdom(虚拟dom)会大大的提高效率，因此目前非常盛行，在一些框架的底层也是用了这个思维方式，比如vue就使用了snabbdom第三方的产生虚拟dom库。
以上是我个人理解，仅供参考，欢迎批评