面试官:"你了解虚拟DOM(Virtual DOM)
跟Diff算法
吗,请描述一下它们";
我:"额,...鹅,那个",完了😰,突然智商不在线,没组织好语言没答好或者压根就答不出来;
所以这次我总结一下相关的知识点,让你可以有一个清晰的认知之余也会让你在今后遇到这种情况可以坦然自若,应付自如,游刃有余:
虚拟DOM(Virtual DOM):
什么是虚拟dom
为什么要使用虚拟dom
虚拟DOM库
DIFF算法:
init函数
h函数
patch函数
patchVnode函数
updateChildren函数
snabbDom源码
一句话总结虚拟DOM就是一个用来描述真实DOM的javaScript对象,这样说可能不够形象,那我们来举个🌰:分别用代码来描述真实DOM以及虚拟DOM
真实DOM:
对应的虚拟DOM:
上面的h函数大家可能有点熟悉的感觉但是一时间也没想起来,没关系我来帮大伙回忆;
开发中常见的现实场景,render函数渲染:
MVVM框架解决视图和状态同步问题
模板引擎可以简化视图操作,没办法跟踪状态
虚拟DOM跟踪状态变化
参考github上virtual-dom的动机描述
虚拟DOM可以维护程序的状态,跟踪上一次的状态
通过比较前后两次状态差异更新真实DOM
跨平台使用
浏览器平台渲染DOM
服务端渲染SSR(Nuxt.js/Next.js),前端是vue向,后者是react向
原生应用(Weex/React Native)
小程序(mpvue/uni-app)等
真实DOM的属性很多,创建DOM节点开销很大
虚拟DOM只是普通JavaScript对象,描述属性并不需要很多,创建开销很小
复杂视图情况下提升渲染性能(操作dom性能消耗大,减少操作dom的范围可以提升性能)
灵魂发问:使用了虚拟DOM就一定会比直接渲染真实DOM快吗?答案当然是否定
的,且听我说:
举例:当一个节点变更时DOMA->DOMB
上述情况:示例1
是创建一个DOMB
然后替换掉DOMA
;示例2
去创建虚拟DOM+DIFF算法
比对发现DOMB
跟DOMA
不是相同的节点,最后还是创建一个DOMB
然后替换掉DOMA
;
可以明显看出1是更快的,同样的结果,2还要去创建虚拟DOM+DIFF算啊对比
所以说使用虚拟DOM比直接操作真实DOM就一定要快这个说法是错误的,不严谨的
举例:当DOM树里面的某个子节点的内容变更时:
当一些复杂的节点,比如说一个父节点里面有多个子节点,当只是一个子节点的内容发生了改变,那么我们没有必要像示例1
重新去渲染这个DOM树
,这个时候虚拟DOM+DIFF算法
就能够得到很好的体现,我们通过示例2
使用虚拟DOM+Diff算法
去找出改变了的子节点更新它的内容就可以了
总结:复杂视图情况下提升渲染性能,因为虚拟DOM+Diff算法
可以精准找到DOM树变更的地方,减少DOM的操作(重排重绘)
Snabbdom
Vue.js2.x内部使用的虚拟DOM就是改造的Snabbdom
大约200SLOC(single line of code)
通过模块可扩展
源码使用TypeScript开发
最快的Virtual DOM之一
virtual-dom
在看完上述的文章之后相信大家已经对Diff算法有一个初步的概念,没错,Diff算法其实就是找出两者之间的差异;
diff 算法首先要明确一个概念就是 Diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 Diff 算法的结果。
下面我将会手撕snabbdom
源码核心部分为大家打开Diff
的心,给点耐心,别关网页,我知道你们都是这样:
init()
设置模块.创建patch()
函数
使用h()
函数创建JavaScript对象(Vnode)
描述真实DOM
patch()
比较新旧两个Vnode
把变化的内容更新到真实DOM树
init函数时设置模块,然后创建patch()函数,我们先通过场景案例来有一个直观的体现:
当init使用了导入的模块就能够在h函数中用这些模块提供的api去创建虚拟DOM(Vnode)对象
;在上文中就使用了样式模块
以及事件模块
让创建的这个虚拟DOM具备样式属性以及事件属性,最终通过patch函数
对比两个虚拟dom
(会先把app转换成虚拟dom),更新视图;
我们再简单看看init的源码部分:
h函数
些地方也会用createElement
来命名,它们是一样的东西,都是创建虚拟DOM
的,在上述文章中相信大伙已经对h函数有一个初步的了解并且已经联想了使用场景,就不作场景案例介绍了,直接上源码部分:
总结:h函数
先生成一个vnode
函数,然后vnode
函数再生成一个Vnode
对象(虚拟DOM对象)
在h函数源码部分涉及一个函数重载
的概念,简单说明一下:
参数个数或参数类型不同的函数()
JavaScript中没有重载的概念
TypeScript中有重载,不过重载的实现还是通过代码调整参数
重载这个概念个参数相关,和返回值无关
实例1(函数重载-参数个数)
实例2(函数重载-参数类型)
要是看完前面的铺垫,看到这里你可能走神了,醒醒啊,这是核心啊,上高地了兄弟
;
pactch(oldVnode,newVnode)
把新节点中变化的内容渲染到真实DOM,最后返回新节点作为下一次处理的旧节点(核心)
对比新旧VNode
是否相同节点(节点的key和sel相同)
如果不是相同节点,删除之前的内容,重新渲染
如果是相同节点,再判断新的VNode
是否有text
,如果有并且和oldVnode
的text
不同直接更新文本内容(patchVnode)
如果新的VNode有children,判断子节点是否有变化(updateChildren,最麻烦,最难实现)
源码:
patchVnode
第一阶段触发prepatch
函数以及update
函数(都会触发prepatch函数,两者不完全相同才会触发update函数)
第二阶段,真正对比新旧vnode
差异的地方
第三阶段,触发postpatch
函数更新节点
源码:
看得可能有点蒙蔽,下面再上一副思维导图:
传统diff算法
虚拟DOM中的Diff算法
传统算法
查找两颗树每一个节点的差异
会运行n1(dom1的节点数)*n2(dom2的节点数)次方去对比,找到差异的部分再去更新
snabbdom的diff算法优化
Snbbdom根据DOM的特点对传统的diff算法做了优化
DOM操作时候很少会跨级别操作节点
只比较同级别
的节点
下面我们就会介绍updateChildren
函数怎么去对比子节点的异同
,也是Diff算法
里面的一个核心以及难点;
这个函数我分为三个部分,部分1:声明变量
,部分2:同级别节点比较
,部分3:循环结束的收尾工作
(见下图);
同级别节点比较
的五种
情况:
oldStartVnode/newStartVnode
(旧开始节点/新开始节点)相同
oldEndVnode/newEndVnode
(旧结束节点/新结束节点)相同
oldStartVnode/newEndVnode
(旧开始节点/新结束节点)相同
oldEndVnode/newStartVnode
(旧结束节点/新开始节点)相同
特殊情况当1,2,3,4的情况都不符合
的时候就会执行,在oldVnodes
里面寻找跟newStartVnode
一样的节点然后位移到oldStartVnode
,若没有找到在就oldStartVnode
创建一个
执行过程是一个循环,在每次循环里,只要执行了上述的情况的五种之一就会结束一次循环
循环结束的收尾工作
:直到oldStartIdx>oldEndIdx || newStartIdx>newEndIdx(代表旧节点或者新节点已经遍历完)
为了更加直观的了解,我们再来看看同级别节点比较
的五种
情况的实现细节:
若情况1符合:(从新旧节点的开始节点开始对比
,oldCh[oldStartIdx]和newCh[newStartIdx]
进行sameVnode(key和sel相同)
判断是否相同节点)
则执行patchVnode
找出两者之间的差异,更新图;如没有差异则什么都不操作,结束一次循环
oldStartIdx++/newStartIdx++
若情况1不符合
就判断情况2
,若符合:(从新旧节点的结束节点开始对比,oldCh[oldEndIdx]和newCh[newEndIdx]
对比,执行sameVnode(key和sel相同)
判断是否相同节点)
执行patchVnode
找出两者之间的差异,更新视图,;如没有差异则什么都不操作,结束一次循环
oldEndIdx--/newEndIdx--
若情况1,2
都不符合,就会尝试情况3:(旧节点的开始节点与新节点的结束节点开始对比,oldCh[oldStartIdx]和newCh[newEndIdx]
对比,执行sameVnode(key和sel相同)
判断是否相同节点)
执行patchVnode
找出两者之间的差异,更新视图,如没有差异则什么都不操作,结束一次循环
oldCh[oldStartIdx]对应的真实dom
位移到oldCh[oldEndIdx]对应的真实dom
后
oldStartIdx++/newEndIdx--
;
若情况1,2,3
都不符合,就会尝试情况4:(旧节点的结束节点与新节点的开始节点开始对比,oldCh[oldEndIdx]和newCh[newStartIdx]
对比,执行sameVnode(key和sel相同)
判断是否相同节点)
执行patchVnode
找出两者之间的差异,更新视图,如没有差异则什么都不操作,结束一次循环
oldCh[oldEndIdx]对应的真实dom
位移到oldCh[oldStartIdx]对应的真实dom
前
oldEndIdx--/newStartIdx++
;
从旧节点里面寻找,若寻找到与newCh[newStartIdx]
相同的节点(且叫对应节点[1]
),执行patchVnode
找出两者之间的差异,更新视图,如没有差异则什么都不操作,结束一次循环
对应节点[1]对应的真实dom
位移到oldCh[oldStartIdx]对应的真实dom
前
若没有寻找到相同的节点
,则创建一个与newCh[newStartIdx]
节点对应的真实dom
插入到oldCh[oldStartIdx]对应的真实dom
前
newStartIdx++
下面我们再介绍一下结束循环
的收尾工作(oldStartIdx>oldEndIdx || newStartIdx>newEndIdx)
:
新节点的所有子节点
先遍历完(newStartIdx>newEndIdx
),循环结束
新节点的所有子节点
遍历结束就是把没有对应相同节点的子节点
删除
旧节点的所有子节点
先遍历完(oldStartIdx>oldEndIdx
),循环结束
旧节点的所有子节点
遍历结束就是在多出来的子节点
插入到旧节点结束节点
前;(源码:newCh[newEndIdx + 1].elm)
,就是对应的旧结束节点的真实dom
,newEndIdx+1是因为在匹配到相同的节点需要-1,所以需要加回来就是结束节点
最后附上源码:
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { let oldStartIdx = 0; // 旧节点开始节点索引
let newStartIdx = 0; // 新节点开始节点索引
let oldEndIdx = oldCh.length - 1; // 旧节点结束节点索引
let oldStartVnode = oldCh[0]; // 旧节点开始节点
let oldEndVnode = oldCh[oldEndIdx]; // 旧节点结束节点
let newEndIdx = newCh.length - 1; // 新节点结束节点索引
let newStartVnode = newCh[0]; // 新节点开始节点
let newEndVnode = newCh[newEndIdx]; // 新节点结束节点
let oldKeyToIdx; // 节点移动相关
let idxInOld; // 节点移动相关
let elmToMove; // 节点移动相关
let before;
// 同级别节点比较
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (oldStartVnode == null) {
oldStartVnode = oldCh[++oldStartIdx];
// Vnode might have been moved left
}
else if (oldEndVnode == null) {
oldEndVnode = oldCh[--oldEndIdx];
}
else if (newStartVnode == null) {
newStartVnode = newCh[++newStartIdx];
}
else if (newEndVnode == null) {
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldStartVnode, newStartVnode))
{ // 判断情况1
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
}
else if (sameVnode(oldEndVnode, newEndVnode))
{ // 情况2
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
oldEndVnode = oldCh[--oldEndIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldStartVnode, newEndVnode))
{ // Vnode moved right情况3
patchVnode(oldStartVnode, newEndVnode,
insertedVnodeQueue);
api.insertBefore(parentElm, oldStartVnode.elm, api.
nextSibling(oldEndVnode.elm));
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left情况4
patchVnode(oldEndVnode, newStartVnode,
insertedVnodeQueue);
api.insertBefore(parentElm, oldEndVnode.elm,
oldStartVnode.elm);
oldEndVnode = oldCh[--oldEndIdx];
newStartVnode = newCh[++newStartIdx];
}
else { // 情况5
if (oldKeyToIdx === undefined) {
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx,
oldEndIdx);
}
idxInOld = oldKeyToIdx[newStartVnode.key];
if (isUndef(idxInOld))
{ // New element // 创建新的节点在旧节点的新节点前
api.insertBefore(parentElm, createElm
(newStartVnode,
insertedVnodeQueue), oldStartVnode.elm);
}
else {
elmToMove = oldCh[idxInOld];
if (elmToMove.sel !== newStartVnode.sel)
{ // 创建新的节点在旧节点的新节点前
api.insertBefore(parentElm, createElm
(newStartVnode, insertedVnodeQueue),
oldStartVnode.elm);
}
else
{// 在旧节点数组中找到相同的节点就对比差异更新视图,然后移动位置
patchVnode(elmToMove, newStartVnode,
insertedVnodeQueue);
oldCh[idxInOld] = undefined;
api.insertBefore(parentElm, elmToMove.elm,
oldStartVnode.elm);
}
}
newStartVnode = newCh[++newStartIdx];
}
}
// 循环结束的收尾工作
if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
if (oldStartIdx > oldEndIdx) {
// newCh[newEndIdx + 1].elm就是旧节点数组中的结束节点对应的dom元素
// newEndIdx+1是因为在之前成功匹配了newEndIdx需要-1
// newCh[newEndIdx + 1].elm,因为已经匹配过有相同的节点了,
它就是等于旧节点数组中的结束节点对应的dom元素(oldCh[oldEndIdx + 1]
.elm)
before = newCh[newEndIdx + 1] == null ?
null : newCh[newEndIdx + 1].
elm;
// 把新节点数组中多出来的节点插入到before前
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx,
insertedVnodeQueue);
}
else {
// 这里就是把没有匹配到相同节点的节点删除掉
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}
}
}
Diff操作可以更加快速
;
Diff操作可以更加准确;(避免渲染错误)
不推荐使用索引
作为key
以下我们看看这些作用的实例:
(避免渲染错误)
:实例:a,b,c三个dom元素中的b,c间插入一个z元素
没有设置key当设置了key:
(避免渲染错误)
实例:a,b,c三个dom元素,修改了a元素的某个属性再去在a元素前新增一个z元素
没有设置key:
因为没有设置key,默认都是undefined,所以节点都是相同的,更新了text的内容但还是沿用了之前的dom,所以实际上a->z(a原本打勾的状态保留了,只改变了text),b->a,c->b,d->c
,遍历完毕发现还要增加一个dom,在最后新增一个text为d的dom元素
设置了key:
当设置了key,a,b,c,d都有对应的key,a->a,b->b,c->c,d->d
,内容相同无需更新,遍历结束,新增一个text为z的dom元素
不推荐使用索引
作为key:设置索引为key:
这明显效率不高,我们只希望找出不同的节点更新,而使用索引作为key会增加运算时间,我们可以把key设置为与节点text为一致就可以解决这个问题:
来源:
https://juejin.cn/post/7000266544181674014
“IT大咖说”欢迎广大技术人员投稿,投稿邮箱:aliang@itdks.com
IT大咖说 | 关于版权
由“IT大咖说(ID:itdakashuo)”原创的文章,转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信:ITDKS10(备注:投稿),茉莉小姐姐会及时与您联系!
感谢您对IT大咖说的热心支持!