什么是虚拟DOM？以及diff算法

真实DOM和虚拟DOM的区别

虚拟DOM是当下两个主流框架vue和react使用到的技术，它到底有什么优缺点可以让两大主流框架所青睐呢？
在了解虚拟DOM之前，我们先了解什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

上面的解释来源于mdn，看起来很高大上，也很难懂？嗯，官方文档嘛，总归是有些晦涩难懂的？我个人的理解就是DOM是一个js对象，用于操作页面上面的元素。

DOM用于操作页面上的元素，那么虚拟DOM当然也是用于操作页面上的元素，从字面上来理解，就是
一个假的DOM，但它同时也是一个可以代替DOM树的一个普通js对象，所以它也包含真实DOM的特性，例如：标签名、标签上的属性、事件监听、子元素等等

既然已经存在DOM对象了，为什么大家还会使用虚拟DOM来代替DOM呢？它有什么优点呢？

1. 能减少不必要的 DOM 操作，如果你要添加1000个节点，真实DOM会一个一个的替你增加，但是虚拟DOM可以将多次操作合并为一次操作，减少DOM操作的频率，如果在1000个节点中，只有100个是新增的话，那么虚拟DOM也只会操作新增的这100个，这是通过虚拟DOM的diff算法实现的。
2. 跨平台渲染，由于虚拟DOM实际上还是一个JS对象，所以它也具有跨平台性，不仅可以用于代替DOM，也可以变成小程序，IOS应用，安卓应用。

虚拟DOM和真实DOM的速度对比，没有什么会比直接操作DOM速度更快的，但是DOM操作速度快，但是浏览器渲染却十分耗时，因为它是一个板凳一个钉子的去进行操作元素，浏览器也需要一个板凳一个钉子的去渲染页面，而虚拟DOM通过减少操作频率从而减少浏览器的渲染时间，所以在这种情况下，虚拟DOM的速度其实是高于真实DOM的，但是操作数量十分庞大时，虚拟DOM的速度也会没有真实DOM快。
所以我们可以得到一个结论

当操作数量十分庞大时，可以选择DOM操作，数量一般时，则可以选择虚拟DOM

上面说了那么所虚拟DOM的优点，那么，虚拟DOM有缺点吗？
当然是有的，虚拟DOM需要额外的创建函数，如react中的createElement和vue中的h函数，vue通过vue-loader，react通过babel来解决这个问题，解决了这个问题的同时也造成了对第三方打包工具的依赖性。

//React中的虚拟DOM
createElement('div',{className:'red',onClick:()=>{}},
  [createElement('span',{},'spanName1'),createElement('span',{},'spanName2')])
//Vue中的虚拟DOM
 h('div',{
    class:'red',
    on:{
      click: ()=>{}
    },
  },[h('span',{},'spanName1'),h('span',{},'spanName2')])

DOM diff 算法

这是晚上找的一张比较形象的图片，但是反过来了，还可以将就点看，diff算法就是通过比较新的虚拟DOM和旧的虚拟DOM，找出不同，从而渲染页面。
diff 会将新旧虚拟DOM逐层对比，找出节点（组件或标签）的不同，进行替换。

虚拟diff的BUG

同级对比时会存在bug
1 2 3 代表3个同级li节点，如果删除2，那么3将会成为新的2。vue通过增加:key来解决这个问题，react中也存在这个问题。详细的解释可以看下面的一篇博客
文章：https://www.zhihu.com/question/61064119/answer/766607894