vlambda博客
学习文章列表

五分钟了解

网红虚拟Dom和diff的前世今生

首先DOM元素非常庞大，并且DOM操作非常耗费性能。对于前端开发来说更新视图和维护状态都需要进行DOM操作。jquery可以控制操作DOM的时机但是复杂度高兼容性不好，因此近 年来，前端的框架主要发展方向就是在解放DOM操作的复杂性上，于是虚拟DOM（Virtual DOM）应运而生。

聪明的研发者将Vdom作为数据驱动视图的解决方案

主要的目标是

1. 将计算更多的转换为JS，因为JS的执行速度很快，转而想到使用JS模拟来DOM的结构。

2. 将新旧节点进行对比，计算出一个最小的更新范围，最后一起更新DOM。

1.页面的结构

 2.用JS模拟DOM的结构，将树状结构变成JS对象形式。tag，props，children分别表示标签、属性和子元素。

 2.这样就有了一个简单的虚拟Dom结构,那么如何比较两个虚拟Dom之间的差异，并且找到最小的更新范围，就需要使用Diff算法。

Diff也就是对比的意思，Diff算法就是对比差异，Diff算法有很多种，有比较文件的Diff算法，也有比较树的Dif算法，因此 Diff算法并非是VUE或React的独创，在Linux和Git当中都有Diff算法的运用。

树的Diff算法的时间复杂度通常是O(n³)，复杂度过高，难以实现。于是为了使Diff算法可用于虚拟DOM中开发者对Diff算法进行了优化使时间复杂度降到了O(n)。

其主要采用的策略是：

1. 同级比较，不做跨级比较

2. 比较tag，如果不相同直接删掉重建，不做深度比较

3. tag和key两者都相同，则认为是相同节点

初步了解了Diff算法接下来就深入的了解一下其中的奥妙~

Diff算法本身非常长也非常复杂，因此我们就主要介绍一下。其中三个的函数。

patch函数做了什么？

1. 在页面初次渲染的时候，将Vdom渲染成真正的DOM然后插入到容器里面；

2. 再次渲染的时候，将新的vnode和旧的vnode相对比，然后把之间差异应用到所构建的真正的DOM树上

PatchVnode函数做了什么？

添加新的children或者移除不相同的children，包括新旧children都有的情况；

1. 新children有，旧的children无则添加新的节点

2.旧的children有，新的children无则删除的节点

3.相关hook的操作和调用  

updatechildren函数比较两个vnode的方式如下图

        updatechildren函数做了什么呢？

1. 开始和开始节点相对比，结束节点与结束节点相对比，向中间查找直到重合结束；

2.拿新旧节点的key值进行对比，如果都未对应则重建节点，对应上则对比tag是否相等，相等则保留，否则重建。