頁面渲染的方式主要有三種
#推薦：《小程式開發教學》
#1.web渲染
2.Native原生渲染
3.web與Native兩者摻雜，即Hybrid渲染。
小程式的呈現形式為第三種。
雙線程通訊方式
為什麼要雙線程 ？ -> 為了管控安全，避免操作DOM。
小程式的渲染層和邏輯層分別由 2 個執行緒管理：渲染層的介面使用了 WebView 進行渲染，邏輯層採用 JsCore 執行緒執行 JS 腳本。
微信小程式的框架包含兩部分 view視圖層、APP service邏輯層。
view層用來渲染頁面結構，
AppService用來邏輯處理、資料請求、介面呼叫。
在兩個進程（兩個webview）裡運行。
視圖層和邏輯層透過系統層的JSBridage進行通訊。
邏輯層： 建立一個單獨的執行緒去執行JavaScript,在這個環境下執行的都是有關小程式業務邏輯的程式碼
渲染層： 介面渲染相關的任務全都在webView線程中執行，透過邏輯層的程式碼去控制渲染哪些介面。
一個小程式存在多個介面，所以渲染層存在多個webview執行緒。
邏輯層和渲染層的通訊會由Native（微信客戶端）做中轉，
邏輯層發送網路請求也會經由Native轉送。
evaluate Javascript
視圖層和邏輯層的資料傳輸，實際上透過兩邊提供的evaluateJavascript實作。也就是使用者傳輸的數據，需要將其轉換為字串形式傳遞，同時把轉換後的數據內容拼接成一份JS腳本，在透過JS腳本的形式傳遞到兩邊獨立環境。
因為evaluateJavascript的執行會受很多方面的影響，資料到達視圖層並不是即時的。隨意我們的setData函數將資料從邏輯層傳送到視圖層，是異步的。
模板資料綁定方案
1.解析語法產生AST
2.根據AST結果產生DOM
3.將資料綁定更新至模板
抽象語法樹(abstract syntax tree或縮寫為AST)
#最容易引發效能問題的主要是第三點，而關於資料更新的解決方案，React首先提出了虛擬DOM的設計，而現在基本上也被大部分框架吸收，小程式也不例外。
虛擬DOM 機制virtual Dom
用JS物件模擬DOM樹-> 比較兩個DOM樹-> 比較兩個DOM樹的差異-> 把差異應用到真正的DOM樹上
1.在渲染層把WXML轉換成對應的JS物件
#2.在邏輯層發生資料變更的時候，透過宿主環境提供的setData方法把資料從邏輯層傳遞到Native，再轉發到渲染層
3.經過對比前後差異，把差異應用在原來的DOM樹上，更新介面
小程式的基礎庫
小程式的基礎函式庫是JavaScript寫的，它可以被注入到渲染層和邏輯層運作。主要用於：
在渲染層，提供各類別元件來元件頁面的元素
在邏輯層，提供各種API來處理各種元素。
處理資料綁定、元件系統、事件系統、通訊系統等一系列框架邏輯
小程式的渲染層和邏輯層是兩個執行緒管理，兩個執行緒各自註入了基礎庫。
小程式的基礎函式庫不會打包在小程式的程式碼中，它會提前內建在微信客戶端。這樣可以：
降低業務小程式的程式碼套件大小
可以單獨修復基礎庫中的Bug，無需修改到業務小程式的程式碼套件
Exparser
Exparser是微信小程式的元件組織框架，內建在小程式基礎庫中，為小程式的各種元件提供基礎支援。小程式內所有元件，包括內建元件和自訂元件，都有Exparser組織管理。
雙線程的渲染機制
雙線程的渲染，其實是結合了前面的一系列機制。
1.透過模板資料綁定和虛擬DOM機制，小程式提供了具有資料綁定語法的DSL，渲染層來描述頁面結構。
<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>2.小程式在邏輯層提供了設定頁面資料的api
this.setData({
key : value
});3.邏輯層需要更改頁面時，只要把修改過的data透過setData傳到渲染層。
傳輸的數據，會轉換為字串形式傳輸，故應避免傳遞大量數據。
4.渲染層會根據渲染機制重新產生虛擬DOM樹，並更新到對應的DOM樹上，造成介面變化。
引入原生元件
繞過 setData、資料通訊和重渲染流程，讓渲染效能更好。
擴充 Web 的能力。例如像輸入框元件（input, textarea）有更好地控制鍵盤的能力。
原生元件的渲染過程：
元件被創建，包含元件屬性會依序賦值。
元件被插入 DOM 樹裡，瀏覽器核心會立即計算佈局，此時我們可以讀取出元件相對頁面的位置（x, y座標）、寬高。
元件通知客戶端，客戶端在相同的位置上，根據寬高插入一塊原生區域，之後客戶端就在這塊區域渲染介面。
當位置或寬度發生變化時，元件會通知客戶端做對應的調整。
以上是分析微信小程式底層原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
