面試官問：如何理解VirtualDOM？-創(chuàng)新互聯(lián)

再進(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)用場景需求。