微信小程序底層原理是什么

小編給大家分享一下微信小程序底層原理是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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坐標）、寬高。

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

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

以上是“微信小程序底層原理是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！