【虚拟DOM】浅析 虚拟DOM

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

设计理念

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

例如：

当你使用ＭＶＶＭ时，就会生成一个列表。

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

但是，你肯定会想，其实只要直接改变ＤＯＭ，在<ul>子元素前插入一个新的
<li>就ＯＫ了，是不是。
但是，通常ＭＶＶＭ是不会这么做的。

所以，当发生大量ＤＯＭ操作时，会消耗更多性能。

那问题来了，该如何改进ViewModel呢？即，如何只增加一个＜ｌｉ＞这个问题。

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

简单而言，ViewModel里的数据就是描述页面Ｖｉｅｗ内容的另一种数据结构，不过需要结合特定的ＭＶＶＭ描述语法编译生成完整的ＤＯＭ结构。那么，结合后上面的代码就变成下面这样：

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

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

但是，你要注意它不是在旧的ulElement上增加，而是生成一个新的包含新增的ulElement。
此时，你可以把这里的ulElement理解为VirtualDOM（虚拟ＤＯＭ）。

虚拟ＤＯＭ是什么？先来看一段定义：

VirtualDOM是一个能够直接描述一段ＨＴＭＬ　ＤＯＭ结构的Ｊａｖａｓｃｒｉｐｔ对象，浏览器可以根据其结构按照一定规则创建出确定唯一的ＨＴＭＬ　ＤＯＭ结构。

下面我们具体讲解下虚拟ＤＯＭ的核心实现思路。

实现核心思路

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

1. 创建Ｖｉｒｔｕａｌ　ＤＯＭ；
2. 对比两个Ｖｉｒｔｕａｌ　ＤＯＭ　生成差异化ＶｉｒｔｕａｌＤＯＭ；
3. 将差异化Ｖｉｒｔｕａｌ　ＤＯＭ　渲染到页面上；

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

创建虚拟 ＤＯＭ

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

一个更通用的方法是，自己实现ＨＴＭＬ字符串文本的解析方式，根据标签之间的关系，读取生成Ｖｉｒｔｕａｌ　ＤＯＭ结构。例如：

现在关键是createVDOM如何实现了。
我们再回头看看：

根据上图，在createVDOM的实现上，需要逐个分析字符串htmlString_ul中的字符，根据词法分析内容，将标签名字存入tagName，属性存入attributes，子标签内容存入children。

这样，你就将一段ＨＴＭＬ字符串解析成一个Ｊａｖａｓｃｒｉｐｔ对象了。

到现在，有没有更深刻地体会到什么不同之处了？

我们看到，上面的方式是Ｊａｖａｓｃｒｉｐｔ通过直接分析ＨＴＭＬ字符串文本来生成ＶｉｒｔｕａｌＤＯＭ，而非对ＤＯＭ　ＡＰＩ进行操作。

所以，小结一下，创建ＶｉｒｔｕａｌＤＯＭ的过程就是将一段ＤＯＭ描述字符串解析成ＶｉｒｔｕａｌＤＯＭ对象的过程，这相当于实现了一个ＨＴＭＬ文本解析器，但没有生成ＤＯＭ对象树。故当交给浏览器解析的时候解析的不是ＨＴＭＬ，而是Ｊａｖａｓｃｒｉｐｔ对象。

但是。。还没完呢。生成了ＶｉｒｔｕａｌＤＯＭ后，还需要进行渲染，生成一个真实的ＤＯＭ，毕竟前面的是虚拟的嘛。

来看一下如何渲染生成真实的ＤＯＭ吧：

接下来，进入第二步骤。

VirtualDOM新旧对比

当发生改变时，通常会生成一个新的ＶｉｒｔｕａｌＤＯＭ结构来表示改变后的状态，然后进行“新旧”比较，找出差异性，得到一个差异树对象。

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

这里用到的算法实际上是对多叉树结构的遍历算法。而该遍历算法又分为深度与广度遍历。这里我们主要以深度优先遍历算法来讲解“新旧”比较的过程。（广度优先类似）

我们先看上图，对上图进行深度优先遍历的结果：ａｂｄｅｃｆｇ
接着改变一下，新增一块内容，如下图红色部分：

此时，对该图进行深度优先遍历的结果：ａｈｉｊｂｄｅｃｆｇ

我们把这两个图的深度优先遍历结果放在一起，如下：

现在，我们是不是能容易地分析出需要再ａ和ｂ节点之间插入ｈｉｊ节点。然后根据ｈｉｊ节点的关系，可以看出节点ｈ是ｉ与ｊ节点的父节点，那么我们就知道了现在只需要插入完整的ｈ节点。
上面有提到广度优先类似，稍微看一下吧：
广度优先的遍历结果分别如下：

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

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

最后，第三步是渲染新生成的差异化虚拟ＤＯＭ。

渲染新生成的差异化虚拟ＤＯＭ

经过差异化比较后，你能获取到发生改变之后的“差异化ＶｉｒｔｕａｌＤＯＭ＂，”差异化类型“和”差异化位置“。
现在就很明朗了，剩下的操作就是将差异化内容经过ＤＯＭ操作渲染到页面上即可完成。

总结一下，虚拟ＤＯＭ最本质的区别是使用Ｊａｖａｓｃｒｉｐｔ对象替代了ＤＯＭ对象树，从而提升页面渲染性能。

参考：w3c

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