分析微信小程式底層原理

頁面渲染的方式主要有三種

#推薦：《小程式開發教學》

#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）有更好地控制鍵盤的能力。

• 體驗更好，同時也減輕 WebView 的渲染工作。例如像地圖元件（map）這類較複雜的元件，其渲染工作不佔用 WebView 線程，而交給更有效率的客戶端原生處理。

原生元件的渲染過程：

• 元件被創建，包含元件屬性會依序賦值。

• 元件被插入 DOM 樹裡，瀏覽器核心會立即計算佈局，此時我們可以讀取出元件相對頁面的位置（x, y座標）、寬高。

• 元件通知客戶端，客戶端在相同的位置上，根據寬高插入一塊原生區域，之後客戶端就在這塊區域渲染介面。

• 當位置或寬度發生變化時，元件會通知客戶端做對應的調整。

#

以上是分析微信小程式底層原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！