Diff 算法

一.虚拟DOM ?

        虚拟 DOM 指的是真实 DOM 的 JS 对象 

        在jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。如果我们要改变页面，只能遍历查询 DOM树，找到需要修改的 DOM，然后修改样式行或结构，以此来达到更新页面的目的（每次查询 DOM 都需要遍历全部 DOM 树）

        在react，vue去操作DOM时，我们会用到虚拟 DOM,相当于建立一个与真实 DOM 树所对应的虚拟 DOM 对象即 JS 对象，并通过对象嵌套的方式来表示 dom 树及其层级结构，这样的话，如果我们每次对 DOM 的修改就变成了对 JS 对象的属性的增删改查，相比之下查找 JS 对象的属性变化要比直接查询真实 dom 树的性能开销小

虚拟DOM与真实DOM的区别？

1、虚拟DOM不需要进行重排与重绘操作；

2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。

3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染。

二.diff 算法

        1.目的

                当 DOM 树发生变化后，新旧真实 DOM 会生产对应的新旧虚拟 DOM，而 diff 算法可以判断新旧虚拟 DOM 的差异，也就是比较新旧 JS 对象的差异。-----> 目的：找出差异，最小化更新视图

        2.流程     

        2.path

        比较的第一步就是执行patch，它相当于对比的入口。既然是对比两个虚拟Dom，那么就将两个虚拟Dom作为参数传入patch中。patch的主要作用是对比两个虚拟Dom的根节点，并根据对比结果操作真实Dom。

         3.patchVnode

        用来比较两个虚拟节点的子节点并更新其子节点对应的真实Dom节点

        2.updateChildren

        diff算法，虚拟DOM中采用的算法，把树形结构按照层级分解，只比较同级元素，不同层级的节点只有创建和删除操作，这样就可以减少比对次数，提高性能.

         1.首尾指针法

        1 依次比较，当比较成功后退出当前比较

        2 渲染结果以 新节点 (newVnode)为准

        3 每次比较成功后stat点和end点向中间靠拢

        4 当新旧节点中有一个stat点跑到end点右侧时终止比较,如果都匹配不到，则旧虚拟DOM key值去比对新虚拟DOM的key值，如果key相同则复用，并移动到新虚拟DOM的位置

 

 

 

1