大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
虚拟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是一个能够直接描述一段ＨＴＭＬ ＤＯＭ结构的Ｊａｖａｓｃｒｉｐｔ对象，浏览器可以根据其结构按照一定规则创建出确定唯一的ＨＴＭＬ ＤＯＭ结构。
下面我们具体讲解下虚拟ＤＯＭ的核心实现思路。
实现核心思路
从上一节中，我们稍微知道了什么是虚拟ＤＯＭ，用一句话总结其操作的核心可分为三步：
- 创建Ｖｉｒｔｕａｌ ＤＯＭ；
- 对比两个Ｖｉｒｔｕａｌ ＤＯＭ 生成差异化ＶｉｒｔｕａｌＤＯＭ；
- 将差异化Ｖｉｒｔｕａｌ ＤＯＭ 渲染到页面上；
下面我们从这三个步骤分别讲起。
创建虚拟 ＤＯＭ
如何创建呢？你可能会想通过遍历ＨＴＭＬ片段创建，但是这样创建有一个问题，因为遍历ＨＴＭＬ就意味着你要使用到ＤＯＭ的读取操作，那这样的话，不是就没有多大意义了。
一个更通用的方法是，自己实现ＨＴＭＬ字符串文本的解析方式，根据标签之间的关系，读取生成Ｖｉｒｔｕａｌ ＤＯＭ结构。例如：
现在关键是createVDOM如何实现了。
我们再回头看看：
根据上图，在createVDOM的实现上，需要逐个分析字符串htmlString_ul中的字符，根据词法分析内容，将标签名字存入tagName，属性存入attributes，子标签内容存入children。
这样，你就将一段ＨＴＭＬ字符串解析成一个Ｊａｖａｓｃｒｉｐｔ对象了。
到现在，有没有更深刻地体会到什么不同之处了？
我们看到，上面的方式是Ｊａｖａｓｃｒｉｐｔ通过直接分析ＨＴＭＬ字符串文本来生成ＶｉｒｔｕａｌＤＯＭ，而非对ＤＯＭ ＡＰＩ进行操作。
所以，小结一下，创建ＶｉｒｔｕａｌＤＯＭ的过程就是将一段ＤＯＭ描述字符串解析成ＶｉｒｔｕａｌＤＯＭ对象的过程，这相当于实现了一个ＨＴＭＬ文本解析器，但没有生成ＤＯＭ对象树。故当交给浏览器解析的时候解析的不是ＨＴＭＬ，而是Ｊａｖａｓｃｒｉｐｔ对象。
但是。。还没完呢。生成了ＶｉｒｔｕａｌＤＯＭ后，还需要进行渲染，生成一个真实的ＤＯＭ，毕竟前面的是虚拟的嘛。
来看一下如何渲染生成真实的ＤＯＭ吧：
接下来，进入第二步骤。
VirtualDOM新旧对比
当发生改变时，通常会生成一个新的ＶｉｒｔｕａｌＤＯＭ结构来表示改变后的状态，然后进行“新旧”比较，找出差异性，得到一个差异树对象。
这里面有一个关键的地方，就是如何进行“新旧”比较。
这里用到的算法实际上是对多叉树结构的遍历算法。而该遍历算法又分为深度与广度遍历。这里我们主要以深度优先遍历算法来讲解“新旧”比较的过程。（广度优先类似）
我们先看上图，对上图进行深度优先遍历的结果：ａｂｄｅｃｆｇ
接着改变一下，新增一块内容，如下图红色部分：
此时，对该图进行深度优先遍历的结果：ａｈｉｊｂｄｅｃｆｇ
我们把这两个图的深度优先遍历结果放在一起，如下：
现在，我们是不是能容易地分析出需要再ａ和ｂ节点之间插入ｈｉｊ节点。然后根据ｈｉｊ节点的关系，可以看出节点ｈ是ｉ与ｊ节点的父节点，那么我们就知道了现在只需要插入完整的ｈ节点。
上面有提到广度优先类似，稍微看一下吧：
广度优先的遍历结果分别如下：
此时我们发现有２处是需要插入的，即需要进行２步操作，那么这就需要进一步判断来合并这２个操作。
小结一下，上面我们只是讲到了“新旧”对比，主要涉及如何发现其中改变的内容，实际上除了这些，你还需要记录发生差异化改变的类型和位置，例如是对哪一类元素进行增加＼删除＼替换操作等。
最后，第三步是渲染新生成的差异化虚拟ＤＯＭ。
渲染新生成的差异化虚拟ＤＯＭ
经过差异化比较后，你能获取到发生改变之后的“差异化ＶｉｒｔｕａｌＤＯＭ＂，”差异化类型“和”差异化位置“。
现在就很明朗了，剩下的操作就是将差异化内容经过ＤＯＭ操作渲染到页面上即可完成。
总结一下，虚拟ＤＯＭ最本质的区别是使用Ｊａｖａｓｃｒｉｐｔ对象替代了ＤＯＭ对象树，从而提升页面渲染性能。
参考：w3c
❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215444.html原文链接：https://javaforall.net
