十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
一、vdom是什么?
vdom是虛擬DOM(Virtual DOM)的簡稱,指的是用JS模擬的DOM結(jié)構(gòu),將DOM變化的對比放在JS層來做。換而言之,vdom就是JS對象。
如下DOM結(jié)構(gòu):
映射成虛擬DOM就是這樣:
{ ?tag:?"ul", ?attrs:?{ ?id:?"list" ?}, ?children:?[ ?{ ?tag:?"li", ?attrs:?{?className:?"item"?}, ?children:?["Item1"] ?},?{ ?tag:?"li", ?attrs:?{?className:?"item"?}, ?children:?["Item2"] ?} ?] }? 復(fù)制代碼
二、為什么要用vdom?
現(xiàn)在有一個(gè)場景,實(shí)現(xiàn)以下需求:
[ ?{ ?name:?"張三", ?age:?"20", ?address:?"北京" ?}, ?{ ?name:?"李四", ?age:?"21", ?address:?"武漢" ?}, ?{ ?name:?"王五", ?age:?"22", ?address:?"杭州" ?}, ] 復(fù)制代碼
將該數(shù)據(jù)展示成一個(gè)表格,并且隨便修改一個(gè)信息,表格也跟著修改。 用jQuery實(shí)現(xiàn)如下:
? ? ? ?Document ? ? ? ? 復(fù)制代碼
這樣點(diǎn)擊按鈕,會(huì)有相應(yīng)的視圖變化,但是你審查以下元素,每次改動(dòng)之后,table標(biāo)簽都得重新創(chuàng)建,也就是說table下面的每一個(gè)欄目,不管是數(shù)據(jù)是否和原來一樣,都得重新渲染,這并不是理想中的情況,當(dāng)其中的一欄數(shù)據(jù)和原來一樣,我們希望這一欄不要重新渲染,因?yàn)镈OM重繪相當(dāng)消耗瀏覽器性能。
因此我們采用JS對象模擬的方法,將DOM的比對操作放在JS層,減少瀏覽器不必要的重繪,提高效率。
當(dāng)然有人說虛擬DOM并不比真實(shí)的DOM快,其實(shí)也是有道理的。當(dāng)上述table中的每一條數(shù)據(jù)都改變時(shí),顯然真實(shí)的DOM操作更快,因?yàn)樘摂MDOM還存在js中diff算法的比對過程。所以,上述性能優(yōu)勢僅僅適用于大量數(shù)據(jù)的渲染并且改變的數(shù)據(jù)只是一小部分的情況。
虛擬DOM更加優(yōu)秀的地方在于:
1、它打開了函數(shù)式的UI編程的大門,即UI = f(data)這種構(gòu)建UI的方式。
2、可以將JS對象渲染到瀏覽器DOM以外的環(huán)境中,也就是支持了跨平臺(tái)開發(fā),比如ReactNative。
另外大家可以參考尤大的一些回答: www.zhihu.com/question/31…
三、使用snabbdom實(shí)現(xiàn)vdom
snabbdom地址:github.com/snabbdom/sn…
這是一個(gè)簡易的實(shí)現(xiàn)vdom功能的庫,相比vue、react,對于vdom這塊更加簡易,適合我們學(xué)習(xí)vdom。vdom里面有兩個(gè)核心的api,一個(gè)是h函數(shù),一個(gè)是patch函數(shù),前者用來生成vdom對象,后者的功能在于做虛擬dom的比對和將vdom掛載到真實(shí)DOM上。
簡單介紹一下這兩個(gè)函數(shù)的用法:
h('標(biāo)簽名', {屬性}, [子元素])
h('標(biāo)簽名', {屬性}, [文本])
patch(container, vnode) container為容器DOM元素
patch(vnode, newVnode)
現(xiàn)在我們就來用snabbdom重寫一下剛才的例子:
? ? ? ?Document ? ? ? ? ? ? ? ? ? 復(fù)制代碼
再進(jìn)入頁面:
你會(huì)發(fā)現(xiàn),只有改變的欄目才閃爍,也就是進(jìn)行重繪,數(shù)據(jù)沒有改變的欄目還是保持原樣,這樣就大大節(jié)省了瀏覽器重新渲染的開銷。四、diff算法
1、什么是diff算法?
所謂diff算法,就是用來找出兩段文本之間的差異的一種算法。
作為一個(gè)前端,大家經(jīng)常會(huì)聽到diff算法這個(gè)詞,其實(shí)diff并不是前端原創(chuàng)的算法,其實(shí)這一個(gè)算法早已在linux的diff命令中有所體現(xiàn),并且大家常用的git diff也是運(yùn)用的diff算法。
2、vdom為什么用diff算法
DOM操作是非常昂貴的,因此我們需要盡量地減少DOM操作。這就需要找出本次DOM必須更新的節(jié)點(diǎn)來更新,其他的不更新,這個(gè)找出的過程,就需要應(yīng)用diff算法。
3、vdom中diff算法的簡易實(shí)現(xiàn)
以下代碼只是幫助大家理解diff算法的原理和流程,不可用于生產(chǎn)環(huán)境。
將vdom轉(zhuǎn)化為真實(shí)dom:
const?createElement?=?(vnode)?=>?{ ?let?tag?=?vnode.tag; ?let?attrs?=?vnode.attrs?||?{}; ?let?children?=?vnode.children?||?[]; ?if(!tag)?{ ?return?null; ?} ?//創(chuàng)建元素 ?let?elem?=?document.createElement(tag); ?//屬性 ?let?attrName; ?for?(attrName?in?attrs)?{ ?if(attrs.hasOwnProperty(attrName))?{ ?elem.setAttribute(attrName,?attrs[attrName]); ?} ?} ?//子元素 ?children.forEach(childVnode?=>?{ ?//給elem添加子元素 ?elem.appendChild(createElement(childVnode)); ?}) ?//返回真實(shí)的dom元素 ?return?elem; } 復(fù)制代碼
用簡易diff算法做更新操作:
function?updateChildren(vnode,?newVnode)?{ ?let?children?=?vnode.children?||?[]; ?let?newChildren?=?newVnode.children?||?[]; ?children.forEach((childVnode,?index)?=>?{ ?let?newChildVNode?=?newChildren[index]; ?if(childVnode.tag?===?newChildVNode.tag)?{ ?//深層次對比,?遞歸過程 ?updateChildren(childVnode,?newChildVNode); ?}?else?{ ?//替換 ?replaceNode(childVnode,?newChildVNode); ?} ?}) } 復(fù)制代碼
參考資料:
知乎尤雨溪回答
揭秘一線互聯(lián)網(wǎng)企業(yè) 前端JavaScript高級(jí)面試
前端進(jìn)階與面試指南
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。