官方文檔給出的雙線程模型:
小程序的宿主環(huán)境
微信客戶端提供雙線程去執(zhí)行wxml,wxss晃洒,js文件姐刁。
雙線程模型
1.上述的渲染層上面運(yùn)行著wxml文件,渲染層使用是的webview線程進(jìn)行渲染(一個(gè)程序會(huì)有多個(gè)頁(yè)面,也就會(huì)有多個(gè)view線程進(jìn)行運(yùn)作)
2.js文件是運(yùn)行在邏輯層硼讽,邏輯層的js是通過(guò)jscore進(jìn)行運(yùn)行的知态。
通過(guò)雙線程界面的渲染過(guò)程是怎樣的捷兰?
wxml與DOM樹(shù)
其實(shí)我們wxml文件與我們html中的DOM樹(shù)是一樣的,這樣我們就可以有js來(lái)模擬一個(gè)虛擬的DOM樹(shù):
初始化渲染
如果我們的wxml文件中如果有變量:要與js邏輯層共同渲染頁(yè)面成為一個(gè)真正的DOM樹(shù):
界面數(shù)據(jù)發(fā)生變化
1如果通過(guò)setDat把hell改成dsb肴甸,則js對(duì)象的的節(jié)點(diǎn)會(huì)發(fā)生改變.
2 這時(shí)會(huì)用diff算法對(duì)比兩個(gè)對(duì)象的變化寂殉,
3 然后將變化的部分應(yīng)用到DOM樹(shù)上
4 從而達(dá)到更新頁(yè)面的目的,這也就是數(shù)據(jù)驅(qū)動(dòng)的原理
總結(jié)
界面渲染的整體流程
1在渲染層將wxml文件與wxss文件轉(zhuǎn)化成js對(duì)象也就是虛擬DOM
2 在邏輯成將虛擬的DOM對(duì)象配合生成原在,真實(shí)的DOM樹(shù)友扰,在交給渲染層渲染
3 當(dāng)數(shù)據(jù)變化是,邏輯層提供更新數(shù)據(jù)庶柿,js對(duì)象發(fā)生改變村怪,用diff算法進(jìn)行比較
4 將更新的內(nèi)容,反饋到真實(shí)的DOM樹(shù)中浮庐,更新頁(yè)面
作者: waller
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=5647