日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

再進入頁面:

你會發(fā)現(xiàn)，只有改變的欄目才閃爍，也就是進行重繪，數(shù)據(jù)沒有改變的欄目還是保持原樣，這樣就大大節(jié)省了瀏覽器重新渲染的開銷。四、diff算法

1、什么是diff算法？

所謂diff算法，就是用來找出兩段文本之間的差異的一種算法。

作為一個前端，大家經(jīng)常會聽到diff算法這個詞，其實diff并不是前端原創(chuàng)的算法，其實這一個算法早已在linux的diff命令中有所體現(xiàn)，并且大家常用的git diff也是運用的diff算法。

2、vdom為什么用diff算法

DOM操作是非常昂貴的，因此我們需要盡量地減少DOM操作。這就需要找出本次DOM必須更新的節(jié)點來更新，其他的不更新，這個找出的過程，就需要應(yīng)用diff算法。

3、vdom中diff算法的簡易實現(xiàn)

以下代碼只是幫助大家理解diff算法的原理和流程，不可用于生產(chǎn)環(huán)境。

將vdom轉(zhuǎn)化為真實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));
?})
?//返回真實的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高級面試

前端進階與面試指南

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。