小程序的雙線程模型

誰是小程序的宿主環境呢？顯而易見小程序的宿主環境是微信。

宿主環境為了執行小程序的各種文件：wxml文件、wxss文件、js文件，提供了雙線模型。

wxml文件：通俗的來做這類文件是用來做布局的,類似網頁開發中的html。

wxss文件：類似網頁開發中的css,是用來做樣式的。

js文件：是用來寫很多邏輯的，可以稱為邏輯層。

雙線程是什么？我們來看個官方的截圖：

邏輯層：創建一個單獨的線程去執行 JavaScript，在這個環境下執行的都是有關小程序業務邏輯的代碼 

渲染層：界面渲染相關的任務全都在 WebView 線程里執行，通過邏輯層代碼去控制渲染哪些界面。一個小程序存在多個界面，所以渲染層存在多個 WebView 線程

界面渲染-初始化渲染

WXML可以先轉成Js對象，在渲染成真正的DOM樹如下圖：

界面渲染過程-數據發生變化

通過setData把msg數據從“Hello Word”變成“Goodbye”為例簡述。

1. 產生的js對象對應的節點就回發生變化

2. 此時可以對比前后兩個JS對象得到變化的部分

3. 然后把這個差異應用到原來的Dom樹上

4. 從而達到更新UI的目的，這就是“數據驅動”的原理
   

如下圖所示：

界面渲染的整體流程

1. 在渲染層，宿主環境會把WXML轉化成對應的JS對象；

2. 將JS對象再次轉化成真實DOM樹，交由渲染層線層渲染；

3. 數據變化時，邏輯層提供最新的變化數據，JS對象發生變化比較進行diff算法對比；

4. 將最新變化的內容反映到真實的DOM樹種，更新UI;