頁面渲染的方式主要有三種推薦：
《小程序開發(fā)教程》1.web渲染2.Native原生渲染3.web與Native兩者摻雜，即Hybrid渲染。
小程序的呈現(xiàn)形式為第三種。
雙線程通信方式為什么要雙線程 ？ -> 為了管控安全，避免操作DOM。
小程序的渲染層和邏輯層分別由 2 個線程管理：
渲染層的界面使用了 WebView 進行渲染，邏輯層采用 JsCore 線程運行 JS 腳本。
微信小程序的框架包含兩部分 view視圖層、APP service邏輯層。
view層用來渲染頁面結(jié)構(gòu)，AppService用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用。
在兩個進程（兩個webview）里運行。
視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信。
邏輯層：
創(chuàng)建一個單獨的線程去執(zhí)行JavaScript,在這個環(huán)境下執(zhí)行的都是有關(guān)小程序業(yè)務(wù)邏輯的代碼渲染層：
界面渲染相關(guān)的任務(wù)全都在webView線程中執(zhí)行，通過邏輯層的代碼去控制渲染哪些界面。
一個小程序存在多個界面，所以渲染層存在多個webview線程。
邏輯層和渲染層的通信會由Native（微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請求也會經(jīng)由Native轉(zhuǎn)發(fā)。
evaluate Javascript視圖層和邏輯層的數(shù)據(jù)傳輸，實際上通過兩邊提供的evaluateJavascript實現(xiàn)。
即用戶傳輸?shù)臄?shù)據(jù)，需要將其轉(zhuǎn)換為字符串形式傳遞，同時把轉(zhuǎn)換后的數(shù)據(jù)內(nèi)容拼接成一份JS腳本，在通過JS腳本的形式傳遞到兩邊獨立環(huán)境。
因為evaluateJavascript的執(zhí)行會受很多方面的影響，數(shù)據(jù)到達視圖層并不是實時的。
隨意我們的setData函數(shù)將數(shù)據(jù)從邏輯層發(fā)送到視圖層，是異步的。
模板數(shù)據(jù)綁定方案1.解析語法生成AST2.根據(jù)AST結(jié)果生成DOM3.將數(shù)據(jù)綁定更新至模板抽象語法樹(abstract syntax tree或者縮寫為AST)最容易引發(fā)性能問題的主要是第三點，而關(guān)于數(shù)據(jù)更新的解決方案，React首先提出了虛擬DOM的設(shè)計，而現(xiàn)在也基本被大部分框架吸收，小程序也不例外。
虛擬 DOM 機制 virtual Dom用JS對象模擬DOM樹 -> 比較兩個DOM樹 -> 比較兩個DOM樹的差異 -> 把差異應用到真正的DOM樹上1.在渲染層把WXML轉(zhuǎn)化成對應的JS對象2.在邏輯層發(fā)生數(shù)據(jù)變更的時候，通過宿主環(huán)境提供的setData方法把數(shù)據(jù)從邏輯層傳遞到Native，再轉(zhuǎn)發(fā)到渲染層3.經(jīng)過對比前后差異，把差異應用在原來的DOM樹上，更新界面小程序的基礎(chǔ)庫小程序的基礎(chǔ)庫是JavaScript編寫的，它可以被注入到渲染層和邏輯層運行。
主要用于：
在渲染層，提供各類組件來組件頁面的元素在邏輯層，提供各種API來處理各種元素。
處理數(shù)據(jù)綁定、組件系統(tǒng)、事件系統(tǒng)、通信系統(tǒng)等一系列框架邏輯小程序的渲染層和邏輯層是兩個線程管理，兩個線程各自注入了基礎(chǔ)庫。
小程序的基礎(chǔ)庫不會打包在小程序的代碼中，它會被提前內(nèi)置在微信客戶端。
這樣可以：
降低業(yè)務(wù)小程序的代碼包大小可以單獨修復基礎(chǔ)庫中的Bug，無需修改到業(yè)務(wù)小程序的代碼包ExparserExparser是微信小程序的組件組織框架，內(nèi)置在小程序基礎(chǔ)庫中，為小程序的各種組件提供基礎(chǔ)支持。
小程序內(nèi)所有組件，包括內(nèi)置組件和自定義組件，都有Exparser組織管理。
雙線程的渲染機制雙線程的渲染，其實是結(jié)合了前面的一系列機制。
1.通過模板數(shù)據(jù)綁定和虛擬DOM機制，小程序提供了帶有數(shù)據(jù)綁定語法的DSL，渲染層來描述頁面結(jié)構(gòu)。
{
{
message }
}
2.小程序在邏輯層提供了設(shè)置頁面數(shù)據(jù)的apithis.setData({
key : value }
);
3.邏輯層需要更改頁面時，只要把修改后的data通過setData傳到渲染層。
傳輸?shù)臄?shù)據(jù)，會轉(zhuǎn)換為字符串形式傳輸，故應避免傳遞大量數(shù)據(jù)。
4.渲染層會根據(jù)渲染機制重新生成虛擬DOM樹，并更新到對應的DOM樹上，引起界面變化。
引入原生組件繞過 setData、數(shù)據(jù)通信和重渲染流程，使渲染性能更好。
擴展 Web 的能力。
比如像輸入框組件（input, textarea）有更好地控制鍵盤的能力。
體驗更好，同時也減輕 WebView 的渲染工作。
比如像地圖組件（map）這類較復雜的組件，其渲染工作不占用 WebView 線程，而交給更高效的客戶端原生處理。
原生組件的渲染過程：
組件被創(chuàng)建，包括組件屬性會依次賦值。
組件被插入到 DOM 樹里，瀏覽器內(nèi)核會立即計算布局，此時我們可以讀取出組件相對頁面的位置（x, y坐標）、寬高。
組件通知客戶端，客戶端在相同的位置上，根據(jù)寬高插入一塊原生區(qū)域，之后客戶端就在這塊區(qū)域渲染界面。
當位置或?qū)捀甙l(fā)生變化時，組件會通知客戶端做相應的調(diào)整。
以上就是分析微信小程序底層原理的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
微信小程序原理本文轉(zhuǎn)載于：
csdn，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
關(guān)于小程序
下一篇：
微信小程序下的單怎么退款?相關(guān)文章相關(guān)視頻微信小程序頁面開發(fā)微信小程序之購物車功能實現(xiàn)微信小程序前端源碼邏輯和工作流程解析微信小程序 暗黑模式分析微信小程序底層原理認識小程序的目錄結(jié)構(gòu)小程序的rpx長度單位詳解布局奔牛課堂小程序搜素框小程序文檔 [溫州做小程序]