一篇文章帶你搞懂Vue虛擬Dom與diff算法
前言
使用過(guò)Vue和React的小伙伴肯定對(duì)虛擬Dom和diff算法很熟悉,它扮演著很重要的角色。由于小編接觸Vue比較多,React只是淺學(xué),所以本篇主要針對(duì)Vue來(lái)展開介紹,帶你一步一步搞懂它。
虛擬DOM
什么是虛擬DOM?
虛擬DOM(Virtual Dom),也就是我們常說(shuō)的虛擬節(jié)點(diǎn),是用JS對(duì)象來(lái)模擬真實(shí)DOM中的節(jié)點(diǎn),該對(duì)象包含了真實(shí)DOM的結(jié)構(gòu)及其屬性,用于對(duì)比虛擬DOM和真實(shí)DOM的差異,從而進(jìn)行局部渲染來(lái)達(dá)到優(yōu)化性能的目的。
真實(shí)的元素節(jié)點(diǎn):
<div id="wrap"> <p class="title">Hello world!</p> </div>
VNode:
{ tag:'div', attrs:{ id:'wrap' }, children:[ { tag:'p', text:'Hello world!', attrs:{ class:'title', } } ] }
為什么使用虛擬DOM?
簡(jiǎn)單了解虛擬DOM后,是不是有小伙伴會(huì)問(wèn):Vue和React框架中為什么會(huì)用到它呢?好問(wèn)題!那來(lái)解決下小伙伴的疑問(wèn)。
起初我們?cè)谑褂肑S/JQuery時(shí),不可避免的會(huì)大量操作DOM,而DOM的變化又會(huì)引發(fā)回流或重繪,從而降低頁(yè)面渲染性能。那么怎樣來(lái)減少對(duì)DOM的操作呢?此時(shí)虛擬DOM應(yīng)用而生,所以虛擬DOM出現(xiàn)的主要目的就是為了減少頻繁操作DOM而引起回流重繪所引發(fā)的性能問(wèn)題的!
虛擬DOM的作用是什么?
- 兼容性好。因?yàn)閂node本質(zhì)是JS對(duì)象,所以不管Node還是瀏覽器環(huán)境,都可以操作;
- 減少了對(duì)Dom的操作。頁(yè)面中的數(shù)據(jù)和狀態(tài)變化,都通過(guò)Vnode對(duì)比,只需要在比對(duì)完之后更新DOM,不需要頻繁操作,提高了頁(yè)面性能;
虛擬DOM和真實(shí)DOM的區(qū)別?
說(shuō)到這里,那么虛擬DOM和真實(shí)DOM的區(qū)別是什么呢?總結(jié)大概如下:
- 虛擬DOM不會(huì)進(jìn)行回流和重繪;
- 真實(shí)DOM在頻繁操作時(shí)引發(fā)的回流重繪導(dǎo)致性能很低;
- 虛擬DOM頻繁修改,然后一次性對(duì)比差異并修改真實(shí)DOM,最后進(jìn)行依次回流重繪,減少了真實(shí)DOM中多次回流重繪引起的性能損耗;
- 虛擬DOM有效降低大面積的重繪與排版,因?yàn)槭呛驼鎸?shí)DOM對(duì)比,更新差異部分,所以只渲染局部;
總損耗 = 真實(shí)DOM增刪改 + (多節(jié)點(diǎn))回流/重繪; //計(jì)算使用真實(shí)DOM的損耗
總損耗 = 虛擬DOM增刪改 + (diff對(duì)比)真實(shí)DOM差異化增刪改 + (較少節(jié)點(diǎn))回流/重繪; //計(jì)算使用虛擬DOM的損耗
可以發(fā)現(xiàn),都是圍繞頻繁操作真實(shí)DOM引起回流重繪,導(dǎo)致頁(yè)面性能損耗來(lái)說(shuō)的。不過(guò)框架也不一定非要使用虛擬DOM,關(guān)鍵在于看是否頻繁操作會(huì)引起大面積的DOM操作。
那么虛擬DOM究竟通過(guò)什么方式來(lái)減少了頁(yè)面中頻繁操作DOM呢?這就不得不去了解DOM Diff算法了。
DIFF算法
當(dāng)數(shù)據(jù)變化時(shí),vue如何來(lái)更新視圖的?其實(shí)很簡(jiǎn)單,一開始會(huì)根據(jù)真實(shí)DOM生成虛擬DOM,當(dāng)虛擬DOM某個(gè)節(jié)點(diǎn)的數(shù)據(jù)改變后會(huì)生成一個(gè)新的Vnode,然后VNode和oldVnode對(duì)比,把不同的地方修改在真實(shí)DOM上,最后再使得oldVnode的值為Vnode。
diff過(guò)程就是調(diào)用patch函數(shù),比較新老節(jié)點(diǎn),一邊比較一邊給真實(shí)DOM打補(bǔ)丁(patch);
對(duì)照vue源碼來(lái)解析一下,貼出核心代碼,旨在簡(jiǎn)單明了講述清楚,不然小編自己看著都頭大了O(∩_∩)O
patch
那么patch是怎樣打補(bǔ)丁的?
//patch函數(shù) oldVnode:老節(jié)點(diǎn) vnode:新節(jié)點(diǎn) function patch (oldVnode, vnode) { ... if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) //如果新老節(jié)點(diǎn)是同一節(jié)點(diǎn),那么進(jìn)一步通過(guò)patchVnode來(lái)比較子節(jié)點(diǎn) } else { /* -----否則新節(jié)點(diǎn)直接替換老節(jié)點(diǎn)----- */ const oEl = oldVnode.el // 當(dāng)前oldVnode對(duì)應(yīng)的真實(shí)元素節(jié)點(diǎn) let parentEle = api.parentNode(oEl) // 父元素 createEle(vnode) // 根據(jù)Vnode生成新元素 if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新元素添加進(jìn)父元素 api.removeChild(parentEle, oldVnode.el) // 移除以前的舊元素節(jié)點(diǎn) oldVnode = null } } ... return vnode } //判斷兩節(jié)點(diǎn)是否為同一節(jié)點(diǎn) function sameVnode (a, b) { return ( a.key === b.key && // key值 a.tag === b.tag && // 標(biāo)簽名 a.isComment === b.isComment && // 是否為注釋節(jié)點(diǎn) // 是否都定義了data,data包含一些具體信息,例如onclick , style isDef(a.data) === isDef(b.data) && sameInputType(a, b) // 當(dāng)標(biāo)簽是<input>的時(shí)候,type必須相同 ) }
從上面可以看出,patch函數(shù)是通過(guò)判斷新老節(jié)點(diǎn)是否為同一節(jié)點(diǎn):
- 如果是同一節(jié)點(diǎn),執(zhí)行patchVnode進(jìn)行子節(jié)點(diǎn)比較;
- 如果不是同一節(jié)點(diǎn),新節(jié)點(diǎn)直接替換老節(jié)點(diǎn);
那如果不是同一節(jié)點(diǎn),但是它們子節(jié)點(diǎn)一樣怎么辦嘞?OMG,要牢記:diff是同層比較,不存在跨級(jí)比較的!簡(jiǎn)單提一嘴,React中也是如此,它們只是針對(duì)同一層的節(jié)點(diǎn)進(jìn)行比較。
patchVnode
既然到了patchVnode方法,說(shuō)明新老節(jié)點(diǎn)為同一節(jié)點(diǎn),那么這個(gè)方法做了什么處理?
function patchVnode (oldVnode, vnode) { const el = vnode.el = oldVnode.el //找到對(duì)應(yīng)的真實(shí)DOM let i, oldCh = oldVnode.children, ch = vnode.children if (oldVnode === vnode) return //如果新老節(jié)點(diǎn)相同,直接返回 if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) { //如果新老節(jié)點(diǎn)都有文本節(jié)點(diǎn)且不相等,那么新節(jié)點(diǎn)的文本節(jié)點(diǎn)替換老節(jié)點(diǎn)的文本節(jié)點(diǎn) api.setTextContent(el, vnode.text) }else { updateEle(el, vnode, oldVnode) if (oldCh && ch && oldCh !== ch) { //如果新老節(jié)點(diǎn)都有子節(jié)點(diǎn),執(zhí)行updateChildren比較子節(jié)點(diǎn)[很重要也很復(fù)雜,下面展開介紹] updateChildren(el, oldCh, ch) }else if (ch){ //如果新節(jié)點(diǎn)有子節(jié)點(diǎn)而老節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn),那么將新節(jié)點(diǎn)的子節(jié)點(diǎn)添加到老節(jié)點(diǎn)上 createEle(vnode) }else if (oldCh){ //如果新節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)而老節(jié)點(diǎn)有子節(jié)點(diǎn),那么刪除老節(jié)點(diǎn)的子節(jié)點(diǎn) api.removeChildren(el) } } }
如果兩個(gè)節(jié)點(diǎn)不一樣,直接用新節(jié)點(diǎn)替換老節(jié)點(diǎn);
如果兩個(gè)節(jié)點(diǎn)一樣,
- 新老節(jié)點(diǎn)一樣,直接返回;
- 老節(jié)點(diǎn)有子節(jié)點(diǎn),新節(jié)點(diǎn)沒(méi)有:刪除老節(jié)點(diǎn)的子節(jié)點(diǎn);
- 老節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn),新節(jié)點(diǎn)有子節(jié)點(diǎn):新節(jié)點(diǎn)的子節(jié)點(diǎn)直接append到老節(jié)點(diǎn);
- 都只有文本節(jié)點(diǎn):直接用新節(jié)點(diǎn)的文本節(jié)點(diǎn)替換老的文本節(jié)點(diǎn);
- 都有子節(jié)點(diǎn):updateChildren
最復(fù)雜的情況也就是新老節(jié)點(diǎn)都有子節(jié)點(diǎn),那么updateChildren是如何來(lái)處理這一問(wèn)題的,該方法也是diff算法的核心,下面我們來(lái)了解一下!
updateChildren
由于代碼太多了,這里先做個(gè)概述。updateChildren方法的核心:
- 提取出新老節(jié)點(diǎn)的子節(jié)點(diǎn):新節(jié)點(diǎn)子節(jié)點(diǎn)ch和老節(jié)點(diǎn)子節(jié)點(diǎn)oldCh;
- ch和oldCh分別設(shè)置StartIdx(指向頭)和EndIdx(指向尾)變量,它們兩兩比較(按照sameNode方法),有四種方式來(lái)比較。如果4種方式都沒(méi)有匹配成功,如果設(shè)置了key就通過(guò)key進(jìn)行比較,在比較過(guò)程種startIdx++,endIdx--,一旦StartIdx > EndIdx表明ch或者oldCh至少有一個(gè)已經(jīng)遍歷完成,此時(shí)就會(huì)結(jié)束比較。
下面結(jié)合圖來(lái)理解:
第一步:
oldStartIdx = A , oldEndIdx = C; newStartIdx = A , newEndIdx = D;
此時(shí)oldStartIdx和newStarIdx匹配,所以將dom中的A節(jié)點(diǎn)放到第一個(gè)位置,此時(shí)A已經(jīng)在第一個(gè)位置,所以不做處理,此時(shí)真實(shí)DOM順序:A B C;
第二步:
oldStartIdx = B , oldEndIdx = C; newStartIdx = C , oldEndIdx = D;
此時(shí)oldEndIdx和newStartIdx匹配,將原本的C節(jié)點(diǎn)移動(dòng)到A后面,此時(shí)真實(shí)DOM順序:A C B;
第三步:
oldStartIdx = C , oldEndIdx = C; newStartIdx = B , newEndIdx = D; oldStartIdx++,oldEndIdx--; oldStartIdx > oldEndIdx
此時(shí)遍歷結(jié)束,oldCh已經(jīng)遍歷完,那么將剩余的ch節(jié)點(diǎn)根據(jù)自己的index插入到真實(shí)DOM中即可,此時(shí)真實(shí)DOM順序:A C B D;
所以匹配過(guò)程中判斷結(jié)束有兩個(gè)條件:
- oldStartIdx > oldEndIdx表示oldCh先遍歷完成,如果ch有剩余節(jié)點(diǎn)就根據(jù)對(duì)應(yīng)index添加到真實(shí)DOM中;
- newStartIdx > newEndIdx表示ch先遍歷完成,那么就要在真實(shí)DOM中將多余節(jié)點(diǎn)刪除掉;
看下圖這個(gè)實(shí)例,就是新節(jié)點(diǎn)先遍歷完成刪除多余節(jié)點(diǎn):
最后,在這些子節(jié)點(diǎn)sameVnode后如果滿足條件繼續(xù)執(zhí)行patchVnode,層層遞歸,直到oldVnode和Vnode中所有子節(jié)點(diǎn)都比對(duì)完成,也就把所有的補(bǔ)丁都打好了,此時(shí)更新到視圖。
總結(jié)
最后,用一張圖來(lái)記憶整個(gè)Diff過(guò)程,希望你能有所收獲!
彩蛋
因?yàn)镽eact只是簡(jiǎn)單學(xué)了基礎(chǔ),這里作為對(duì)比來(lái)概述一下:
1.React渲染機(jī)制:React采用虛擬DOM,在每次屬性和狀態(tài)發(fā)生變化時(shí),render函數(shù)會(huì)返回不同的元素樹,然后對(duì)比返回的元素樹和上次渲染樹的差異并對(duì)差異部分進(jìn)行更新,最后渲染為真實(shí)DOM。
2.diff永遠(yuǎn)都是同層比較,如果節(jié)點(diǎn)類型不同,直接用新的替換舊的。如果節(jié)點(diǎn)類型相同,就比較他們的子節(jié)點(diǎn),依次類推。通常元素上綁定的key值就是用來(lái)比較節(jié)點(diǎn)的,所以一定要保證其唯一性,一般不采用數(shù)組下標(biāo)來(lái)作為key值,因?yàn)楫?dāng)數(shù)組元素發(fā)生變化時(shí)index會(huì)有所改動(dòng)。
3.渲染機(jī)制的整個(gè)過(guò)程包含了更新操作,將虛擬DOM轉(zhuǎn)換為真實(shí)DOM,所以整個(gè)渲染過(guò)程就是Reconciliation。而這個(gè)過(guò)程的核心又主要是diff算法,利用的是生命周期shouldComponentUpdate函數(shù)。
到此這篇帶你搞懂Vue虛擬Dom與diff算法的文章就介紹到這了,更多相關(guān)Vue虛擬Dom與diff算法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫效果,vue頁(yè)面出現(xiàn)正在加載的初始頁(yè)面與實(shí)現(xiàn)動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue使用動(dòng)態(tài)組件手寫Router View實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用動(dòng)態(tài)組件手寫RouterView實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue——解決報(bào)錯(cuò) Computed property "****" was assigned to but it ha
這篇文章主要介紹了Vue——解決報(bào)錯(cuò) Computed property "****" was assigned to but it has no setter.的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法
這篇文章主要介紹了使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法,需要的朋友可以參考下2017-12-12在vue中使用rules對(duì)表單字段進(jìn)行驗(yàn)證方式
這篇文章主要介紹了在vue中使用rules對(duì)表單字段進(jìn)行驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12