小程序的雙線程模型

官方文檔給出的雙線程模型:

 

小程序的宿主環境

微信客戶端提供雙線程去執行wxml,wxss,js文件。

雙線程模型

1.上述的渲染層上面運行着wxml文件,渲染層使用是的webview線程進行渲染(一個程序會有多個頁面,也就會有多個view線程進行運作)

2.js文件是運行在邏輯層,邏輯層的js是通過jscore進行運行的。

通過雙線程界面的渲染過程是怎樣的?

wxml與DOM樹

其實我們wxml文件與我們html中的DOM樹是一樣的,這樣我們就可以有js來模擬一個虛擬的DOM樹:

 

初始化渲染

 

如果我們的wxml文件中如果有變量:要與js邏輯層共同渲染頁面成爲一個真正的DOM樹:

界面數據發生變化

 

1如果通過setDat把hell改成dsb,則js對象的的節點會發生改變.

2 這時會用diff算法對比兩個對象的變化,

3 然後將變化的部分應用到DOM樹上

4 從而達到更新頁面的目的,這也就是數據驅動的原理

 

總結

界面渲染的整體流程

1在渲染層將wxml文件與wxss文件轉化成js對象也就是虛擬DOM

2 在邏輯成將虛擬的DOM對象配合生成,真實的DOM樹,在交給渲染層渲染

3 當數據變化是,邏輯層提供更新數據,js對象發生改變,用diff算法進行比較

4 將更新的內容,反饋到真實的DOM樹中,更新頁面

 

作者: waller
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=5647

發佈了108 篇原創文章 · 獲贊 668 · 訪問量 169萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章