【虚拟DOM】浅析 虚拟DOM

虚拟DOM作为目前流行的DOM操作思想,被广泛用在react中,这套设计的确在用户体验上带来了显著提升。下面我们来浅析一下这个东西,一步步看下去,希望你能有所收获。

这里写图片描述
设计理念

尽管MVVM将页面逻辑实现的核心转移到数据层面的修改上,但是最终数据层反映到页面上View的层的渲染和改变仍是通过对应的指令进行DOM操作来完成的。而且,通常一次ViewModel的变化可能会触发液面上多个指令操作DOM的变化,从而造成页面结构层发生大量DOM操作或渲染。❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步~

例如:
这里写图片描述

当你使用MVVM时,就会生成一个列表。

现在我们把 content 变成:
[{value:0},{value:1},{value:2},{value:3}],即增加一个。
如果在MVVM中一般会重新渲染整个列表,包括列表中无须改变的部分也会重新渲染一次,例如包含值1,2,3的三个列表。

但是,你肯定会想,其实只要直接改变DOM,在<ul>子元素前插入一个新的
<li>就OK了,是不是。
但是,通常MVVM是不会这么做的。

所以,当发生大量DOM操作时,会消耗更多性能。

那问题来了,该如何改进ViewModel呢?即,如何只增加一个<li>这个问题。

这里我们需要结合“新旧比较”的思想,将新的Model data和旧的Model data对比,然后记录ViewModel的改变方式和位置,就知道这次View层应该怎样更新,这样比直接重新渲染整个列表高效。

简单而言,ViewModel里的数据就是描述页面View内容的另一种数据结构,不过需要结合特定的MVVM描述语法编译生成完整的DOM结构。那么,结合后上面的代码就变成下面这样:

这里写图片描述

此时我们需要增加一个新的<li>,按照上面的思路,就是先生成一个新的ulElement,然后与旧的ulElement进行结构上的对比,那么,其实就是在旧的ulElement对象的children属性额最前面增加一份内容,即:

{tagName:'li',
      children:[{
                 tagName:'span',
                 nodeValue:0
        },{
                 tagName:'span',
                 nodeText:'text-0'
 }]}

但是,你要注意它不是在旧的ulElement上增加,而是生成一个新的包含新增的ulElement
此时,你可以把这里的ulElement理解为VirtualDOM(虚拟DOM)。

虚拟DOM是什么?先来看一段定义:

VirtualDOM是一个能够直接描述一段HTML DOM结构的Javascript对象,浏览器可以根据其结构按照一定规则创建出确定唯一的HTML DOM结构。

下面我们具体讲解下虚拟DOM的核心实现思路。
这里写图片描述

实现核心思路

从上一节中,我们稍微知道了什么是虚拟DOM,用一句话总结其操作的核心可分为三步:

  1. 创建Virtual DOM;
  2. 对比两个Virtual DOM 生成差异化VirtualDOM;
  3. 将差异化Virtual DOM 渲染到页面上;

下面我们从这三个步骤分别讲起。

创建虚拟 DOM

如何创建呢?你可能会想通过遍历HTML片段创建,但是这样创建有一个问题,因为遍历HTML就意味着你要使用到DOM的读取操作,那这样的话,不是就没有多大意义了。

一个更通用的方法是,自己实现HTML字符串文本的解析方式,根据标签之间的关系,读取生成Virtual DOM结构。例如:

这里写图片描述

现在关键是createVDOM如何实现了。
我们再回头看看:
这里写图片描述
根据上图,在createVDOM的实现上,需要逐个分析字符串htmlString_ul中的字符,根据词法分析内容,将标签名字存入tagName,属性存入attributes,子标签内容存入children

这样,你就将一段HTML字符串解析成一个Javascript对象了。

到现在,有没有更深刻地体会到什么不同之处了?
这里写图片描述

我们看到,上面的方式是Javascript通过直接分析HTML字符串文本来生成VirtualDOM,而非对DOM API进行操作。

所以,小结一下,创建VirtualDOM的过程就是将一段DOM描述字符串解析成VirtualDOM对象的过程,这相当于实现了一个HTML文本解析器,但没有生成DOM对象树。故当交给浏览器解析的时候解析的不是HTML,而是Javascript对象。

但是。。还没完呢。生成了VirtualDOM后,还需要进行渲染,生成一个真实的DOM,毕竟前面的是虚拟的嘛。

来看一下如何渲染生成真实的DOM吧:

这里写图片描述

接下来,进入第二步骤。

VirtualDOM新旧对比

这里写图片描述
当发生改变时,通常会生成一个新的VirtualDOM结构来表示改变后的状态,然后进行“新旧”比较,找出差异性,得到一个差异树对象。

这里面有一个关键的地方,就是如何进行“新旧”比较。

这里用到的算法实际上是对多叉树结构的遍历算法。而该遍历算法又分为深度与广度遍历。这里我们主要以深度优先遍历算法来讲解“新旧”比较的过程。(广度优先类似)
这里写图片描述
我们先看上图,对上图进行深度优先遍历的结果:abdecfg
接着改变一下,新增一块内容,如下图红色部分:
这里写图片描述
此时,对该图进行深度优先遍历的结果:ahijbdecfg

我们把这两个图的深度优先遍历结果放在一起,如下:
这里写图片描述
现在,我们是不是能容易地分析出需要再a和b节点之间插入hij节点。然后根据hij节点的关系,可以看出节点h是i与j节点的父节点,那么我们就知道了现在只需要插入完整的h节点。
上面有提到广度优先类似,稍微看一下吧:
广度优先的遍历结果分别如下:

这里写图片描述

此时我们发现有2处是需要插入的,即需要进行2步操作,那么这就需要进一步判断来合并这2个操作。

小结一下,上面我们只是讲到了“新旧”对比,主要涉及如何发现其中改变的内容,实际上除了这些,你还需要记录发生差异化改变的类型和位置,例如是对哪一类元素进行增加\删除\替换操作等。

最后,第三步是渲染新生成的差异化虚拟DOM。

渲染新生成的差异化虚拟DOM

经过差异化比较后,你能获取到发生改变之后的“差异化VirtualDOM",”差异化类型“和”差异化位置“。
现在就很明朗了,剩下的操作就是将差异化内容经过DOM操作渲染到页面上即可完成。

总结一下,虚拟DOM最本质的区别是使用Javascript对象替代了DOM对象树,从而提升页面渲染性能。

这里写图片描述

参考:w3c

❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步~

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值