虚拟DOM和diff算法（原理）

虚拟DOM和diff算法（原理）（面试题）

什么是虚拟DOM（virtual DOM）：

   所谓的虚拟 dom，也就是我们常说的虚拟节点，
   它是通过JS的Object对象模拟DOM中的节点
   然后再通过特定的render（渲染）方法将其渲染成真实的DOM的节点。

为什么使用虚拟DOM：

  使用js操作DOM时（增删改查等等），那么DOM元素的变化自然会引起页面的回流（重排）
  或者重绘，页面的DOM重绘自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作
  是框架需要考虑的一个重要问题！

真实DOM和虚拟DOM的区别：

1.虚拟DOM不会进行排版与重绘操作
2.真实DOM频繁排版与重绘的效率是相当低
3.虚拟DOM进行频繁修改，然后一次性比较（使用diff算法）并修改真实DOM中需要改的部分，
最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
4.虚拟DOM有效降低了重绘与排版的次数，因为，最终把虚拟dom与真实DOM比较差异，
可以只渲染局部

diff算法：

     虚拟DOM，是一种为了尽可能减少页面频繁操作DOM的方式，那么在虚拟DOM中，
     通过什么方式才能做到呢?  就是Diff算法进行对比

diff算法的原理：

    逐步解析newVdom的节点，找到它在oldVdom中的位置，如果找到了就移动对应的DOM元素，
    如果没找到说明是新增节点，则新建一个节点插入。
    遍历完成之后如果oldVdom中还有没处理过的节点，
    则说明这些节点在newVdom中被删除了，删除它们即可。

总结：
1、产生两个虚拟DOM树：newVDom，oldVDom。 
2、oldVDom和真实DOM保持一致
3、操作的newVDom
4、操作完毕后，通过diff算法对比newVDom和oldVDom的差异，并在oldVDom标注哪些节点要删除，哪些节点要增加，修改
5、根据oldVDom操作真实的DOM，让真实Dom和oldVDom保持一致