深入聊一聊虛擬DOM與diff算法
虛擬DOM與diff算法
在vue、react等技術(shù)出現(xiàn)之前，每次修改DOM都需要通過遍歷查詢DOM樹的方式，找到需要更新的DOM，然后修改樣式或結(jié)構(gòu)，資源損耗十分嚴(yán)重。而對(duì)于虛擬DOM來(lái)說(shuō)，每次DOM的更改就變成了JS對(duì)象的屬性的更改，能方便的查找JS對(duì)象的屬性變化，要比查詢DOM樹的性能開銷小，所以能夠改善瀏覽器的性能問題。
對(duì)于vue，從vue2就開始支持虛擬DOM。
diff算法：簡(jiǎn)單來(lái)說(shuō)就是找出兩個(gè)對(duì)象的差異，只對(duì)有差異的一小塊DOM進(jìn)行更新，而不是整個(gè)DOM，從而達(dá)到最小量更新的效果
虛擬DOM：內(nèi)部會(huì)把代碼段解析成一個(gè)對(duì)象（真實(shí)DOM是通過模板編譯變成虛擬DOM的）
用JS對(duì)象描述DOM的層次結(jié)構(gòu)，DOM中的一切屬性都在虛擬DOM中有對(duì)應(yīng)的屬性
snabbdom環(huán)境搭建
是虛擬DOM庫(kù)，diff算法的鼻祖，vue源碼借鑒了snabbdom
官方git:https://github.com/snabbdom/snabbdom
git上的snabbdom源碼是用TypeScript寫的，如果要直接使用編譯出來(lái)的Javascript版的snabbdom庫(kù)，可以從npm上下載npm i -D snabbdom
snabbdom庫(kù)是DOM庫(kù)，不能在node js環(huán)境運(yùn)行，需要搭建webpack和webpack-dev-server開發(fā)環(huán)境。需要注意的是必須安裝webpack@5。
npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
配置webpack.config.js文件，參考官網(wǎng)進(jìn)行配置：https://webpack.docschina.org/
const path = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
// 虛擬打包路徑，文件夾不會(huì)真正生成，而是在8080端口虛擬生成
publicPath: 'xuni',
// 打包出來(lái)的文件名
filename: "bundle.js",
},
// 配置webpack-dev-server
devServer: {
// 端口號(hào)
port: 8082,
// 靜態(tài)根目錄
contentBase: 'www',
},
}將項(xiàng)目根目錄下的package.json文件中修改script的配置，就可以通過npm run dev啟動(dòng)項(xiàng)目
配置完之后將官網(wǎng)的Example進(jìn)行測(cè)試，由于示例要獲取id=container的節(jié)點(diǎn)，所以我們需要提前準(zhǔn)備一個(gè)id為container的div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="/xuni/bundle.js"></script>
</body>
</html>需要注意的點(diǎn)
頁(yè)面出現(xiàn)如下狀態(tài)即表示配置完成
虛擬DOM和h函數(shù)
diff是發(fā)生在虛擬DOM上的
新虛擬DOM和老虛擬DOM進(jìn)行diff(精細(xì)化比較)，算出應(yīng)該如何最小量更新，最后反映到真正的DOM上。
h函數(shù)用來(lái)產(chǎn)生虛擬節(jié)點(diǎn)(vnode)
h('a',{ props: { href: 'https://www.baidu.com' } }, '百度');會(huì)得到這樣的虛擬節(jié)點(diǎn)
{ "sel": "a", "data": { props: { href: 'https://www.baidu.com' } }, "text": "百度" }它表示的真正的DOM節(jié)點(diǎn)
<a >百度</a>
如果需要讓虛擬節(jié)點(diǎn)上樹，需要借助patch函數(shù)
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
// 創(chuàng)建patch函數(shù)
var patch = init([classModule, propsModule, styleModule, eventListenersModule]);
//創(chuàng)建虛擬節(jié)點(diǎn)
var vNode1 = h('a',{ props: { href: 'https://www.baidu.com' } }, '百度');
// 讓虛擬節(jié)點(diǎn)上樹
const container = document.getElementById('container');
patch(container,vNode1);h函數(shù)可以嵌套使用，從而得到虛擬DOM樹
h('ul',{},[
h('li',{},'可樂');
h('li',{},'雪碧');
h('li',{},'椰汁');
])diff算法
實(shí)現(xiàn)最小量更新。需要key。key是這個(gè)節(jié)點(diǎn)的唯一標(biāo)識(shí)，告訴diff算法，在更改前后它們是同一個(gè)DOM節(jié)點(diǎn)。
只有同一個(gè)虛擬節(jié)點(diǎn)，才進(jìn)行精細(xì)化比較。否則就是暴力刪除舊的、插入新的。
同一個(gè)虛擬節(jié)點(diǎn)：選擇器相同且key相同
只進(jìn)行同層比較，不會(huì)進(jìn)行跨層比較。
比如下面這兩個(gè)DOM節(jié)點(diǎn)，雖然是同一片虛擬節(jié)點(diǎn)，但是跨層了，依舊會(huì)暴力刪除舊的、插入新的。
const vnode1 = h('div',{},[
h('p',{ key: 'A' }, 'A'),
h('p',{ key: 'B' }, 'B'),
h('p',{ key: 'C' }, 'C'),
h('p',{ key: 'D' }, 'D'),
]);
const vnode2 = h('div',{},h('section',{},[
h('p',{ key: 'A' }, 'A'),
h('p',{ key: 'B' }, 'B'),
h('p',{ key: 'C' }, 'C'),
h('p',{ key: 'D' }, 'D'),
]))分析源碼也可以驗(yàn)證以上所述
首先會(huì)去判斷是不是虛擬節(jié)點(diǎn)，不是的話會(huì)先去把它包裝成虛擬節(jié)點(diǎn)
然后判斷是不是同一個(gè)節(jié)點(diǎn)，不是的話插入新的、刪除舊的，是的話精細(xì)化比較
執(zhí)行的流程圖
patch函數(shù)
首先判斷oldVnode是否是虛擬節(jié)點(diǎn)，如果是DOM節(jié)點(diǎn)的話先把oldVnode包裝成虛擬節(jié)點(diǎn)
然后判斷新節(jié)點(diǎn)和舊節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)，判斷key的值是否相同，標(biāo)簽名是否相同，是否都定義了data(data包含一些具體的信息，onclick、style等)
如果不是同一節(jié)點(diǎn)，新節(jié)點(diǎn)直接替換老節(jié)點(diǎn)，刪除舊的、插入新的。在源碼中，創(chuàng)建所有的子節(jié)點(diǎn)時(shí)，需要遞歸。
如果新舊節(jié)點(diǎn)是同一個(gè)節(jié)點(diǎn)時(shí)，會(huì)執(zhí)行patchVnode進(jìn)行子節(jié)點(diǎn)比較
patchVnode函數(shù)
首先會(huì)找到對(duì)應(yīng)的真實(shí)DOM
const elm = (vnode.elm = oldVnode.elm)!;
如果新老節(jié)點(diǎn)相同，直接返回 if(oldVnode === vnode) return
如果vnode沒有文本節(jié)點(diǎn)(
isUndef(vnode.text))都有children且不相同
使用updateChildren對(duì)比children（diff算法的核心）
只有vnode有children
則oldVnode是一個(gè)空標(biāo)簽或者是文本節(jié)點(diǎn)，如果是文本節(jié)點(diǎn)就清空文本節(jié)點(diǎn)，然后將vnode的children創(chuàng)建為真實(shí)DOM后插入到空標(biāo)簽內(nèi)。
只有oldVnode有children
vnode沒有的東西，在oldVnode內(nèi)需要?jiǎng)h除掉removeVnodes（oldVnode有且vnode沒有的，都清空或移除）
只有oldVnode有文本
清空文本
如果vnode有text屬性且不同
以vnode為標(biāo)準(zhǔn)，無(wú)論oldVnode是什么類型節(jié)點(diǎn)，直接設(shè)置為vnode內(nèi)的文本
updateChildren函數(shù)
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(尾指針)變量，相互比較。此時(shí)就有四個(gè)變量：
oldStartIdx、oldEndIdx、newStartIdx、newEndIdx(這里采用雙指針的思想)有四種方式來(lái)比較：
oldStartIdx和newStartIdx比較
如果匹配，DOM不用修改，將oldStartIdx和newStartIdx的下標(biāo)往后移一位
oldEndIdx和newEndIdx比較
如果匹配，DOM不用修改，將oldEndIdx和newEndIdx的下標(biāo)往前移一位
oldStartIdx和newEndIdx比較
如果匹配，DOM不用修改，將oldStartIdx對(duì)應(yīng)的真實(shí)DOM插入到最后一位，oldStartIdx的下標(biāo)后移一位，newEndIdx的下標(biāo)前移一位。
oldEndIdx和newStartIdx比較
如果匹配，DOM不用修改，將oldEndIdx對(duì)應(yīng)的真實(shí)DOM插入到oldEndIdx對(duì)應(yīng)真實(shí)Dom的前面，oldEndIdx的下標(biāo)前移一位，newStartIdx的下標(biāo)后移一位。
如果4種方式都沒有匹配成功，如果設(shè)置了key就通過key進(jìn)行比較，在比較過程中startIdx++，endIdx--，一旦StartIdx > EndIdx表明ch或者oldCh至少有一個(gè)已經(jīng)遍歷完成，此時(shí)就會(huì)結(jié)束比較
處理結(jié)束后，如果新節(jié)點(diǎn)有剩余，就添加；如果舊節(jié)點(diǎn)有剩余，就刪除
v-for中key作用與原理
key是虛擬DOM對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)【新數(shù)據(jù)】產(chǎn)生【新的虛擬DOM】，隨后Vue進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
（1）舊虛擬DOM中找到了與新虛擬DOM相同的key
?①若虛擬DOM中內(nèi)容沒變，直接使用之前的真實(shí)DOM
?②若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM
（2）舊虛擬DOM中未找到與新虛擬DOM相同的key
?創(chuàng)建新的真實(shí)DOM，隨后渲染到頁(yè)面
所以，如果用index作為key可能會(huì)引發(fā)的問題：
（1）若對(duì)數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破環(huán)順序操作，會(huì)產(chǎn)生沒有必要的真實(shí)DOM更新==>界面效果沒問題，但效率低
（2）如果結(jié)構(gòu)中還包含輸入類的DOM，會(huì)產(chǎn)生錯(cuò)誤DOM錯(cuò)誤==>界面有問題
實(shí)際開發(fā)中如何選擇key
最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key，比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的
總結(jié)
到此這篇關(guān)于虛擬DOM與diff算法的文章就介紹到這了,更多相關(guān)虛擬DOM與diff算法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能
這篇文章主要介紹了Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能,本通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng)總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時(shí)的注意事項(xiàng),文中通過實(shí)例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇淺談vue異步數(shù)據(jù)影響頁(yè)面渲染，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-10-10
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-11
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-11-11
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue計(jì)時(shí)器的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue計(jì)時(shí)器的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
在Vue中使用scoped屬性實(shí)現(xiàn)樣式隔離的原因解析
scoped是Vue的一個(gè)特殊屬性,可以應(yīng)用于<style>標(biāo)簽中的樣式,這篇文章給大家介紹在Vue中,使用scoped屬性為什么可以實(shí)現(xiàn)樣式隔離,感興趣的朋友一起看看吧2023-12-12
解決antd Form 表單校驗(yàn)方法無(wú)響應(yīng)的問題
這篇文章主要介紹了解決antd Form 表單校驗(yàn)方法無(wú)響應(yīng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10