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

網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都紙箱等企業(yè)提供專業(yè)服務(wù)。

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

1.web渲染

2.Native原生渲染

3.web與Native兩者摻雜，即Hybrid渲染。

小程序的呈現(xiàn)形式為第三種。

雙線程通信方式

為什么要雙線程 ？ -> 為了管控安全，避免操作DOM。

小程序的渲染層和邏輯層分別由 2 個(gè)線程管理：渲染層的界面使用了 WebView 進(jìn)行渲染，邏輯層采用 JsCore 線程運(yùn)行 JS 腳本。

微信小程序的框架包含兩部分 view視圖層、APP service邏輯層。

view層用來渲染頁面結(jié)構(gòu)，

AppService用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用。

在兩個(gè)進(jìn)程（兩個(gè)webview）里運(yùn)行。

視圖層和邏輯層通過系統(tǒng)層的JSBridage進(jìn)行通信。

邏輯層： 創(chuàng)建一個(gè)單獨(dú)的線程去執(zhí)行JavaScript,在這個(gè)環(huán)境下執(zhí)行的都是有關(guān)小程序業(yè)務(wù)邏輯的代碼

渲染層： 界面渲染相關(guān)的任務(wù)全都在webView線程中執(zhí)行，通過邏輯層的代碼去控制渲染哪些界面。

一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)webview線程。

邏輯層和渲染層的通信會(huì)由Native（微信客戶端）做中轉(zhuǎn)，

邏輯層發(fā)送網(wǎng)絡(luò)請求也會(huì)經(jīng)由Native轉(zhuǎn)發(fā)。

evaluate Javascript

視圖層和邏輯層的數(shù)據(jù)傳輸，實(shí)際上通過兩邊提供的evaluateJavascript實(shí)現(xiàn)。即用戶傳輸?shù)臄?shù)據(jù)，需要將其轉(zhuǎn)換為字符串形式傳遞，同時(shí)把轉(zhuǎn)換后的數(shù)據(jù)內(nèi)容拼接成一份JS腳本，在通過JS腳本的形式傳遞到兩邊獨(dú)立環(huán)境。

因?yàn)閑valuateJavascript的執(zhí)行會(huì)受很多方面的影響，數(shù)據(jù)到達(dá)視圖層并不是實(shí)時(shí)的。隨意我們的setData函數(shù)將數(shù)據(jù)從邏輯層發(fā)送到視圖層，是異步的。

模板數(shù)據(jù)綁定方案

1.解析語法生成AST

2.根據(jù)AST結(jié)果生成DOM

3.將數(shù)據(jù)綁定更新至模板

抽象語法樹(abstract syntax tree或者縮寫為AST)

最容易引發(fā)性能問題的主要是第三點(diǎn)，而關(guān)于數(shù)據(jù)更新的解決方案，React首先提出了虛擬DOM的設(shè)計(jì)，而現(xiàn)在也基本被大部分框架吸收，小程序也不例外。

虛擬 DOM 機(jī)制 virtual Dom

用JS對象模擬DOM樹 -> 比較兩個(gè)DOM樹 -> 比較兩個(gè)DOM樹的差異 -> 把差異應(yīng)用到真正的DOM樹上

1.在渲染層把WXML轉(zhuǎn)化成對應(yīng)的JS對象

2.在邏輯層發(fā)生數(shù)據(jù)變更的時(shí)候，通過宿主環(huán)境提供的setData方法把數(shù)據(jù)從邏輯層傳遞到Native，再轉(zhuǎn)發(fā)到渲染層

3.經(jīng)過對比前后差異，把差異應(yīng)用在原來的DOM樹上，更新界面

小程序的基礎(chǔ)庫

小程序的基礎(chǔ)庫是JavaScript編寫的，它可以被注入到渲染層和邏輯層運(yùn)行。主要用于：

在渲染層，提供各類組件來組件頁面的元素

在邏輯層，提供各種API來處理各種元素。

處理數(shù)據(jù)綁定、組件系統(tǒng)、事件系統(tǒng)、通信系統(tǒng)等一系列框架邏輯

小程序的渲染層和邏輯層是兩個(gè)線程管理，兩個(gè)線程各自注入了基礎(chǔ)庫。

小程序的基礎(chǔ)庫不會(huì)打包在小程序的代碼中，它會(huì)被提前內(nèi)置在微信客戶端。這樣可以：

降低業(yè)務(wù)小程序的代碼包大小

可以單獨(dú)修復(fù)基礎(chǔ)庫中的Bug，無需修改到業(yè)務(wù)小程序的代碼包

Exparser

Exparser是微信小程序的組件組織框架，內(nèi)置在小程序基礎(chǔ)庫中，為小程序的各種組件提供基礎(chǔ)支持。小程序內(nèi)所有組件，包括內(nèi)置組件和自定義組件，都有Exparser組織管理。

雙線程的渲染機(jī)制

雙線程的渲染，其實(shí)是結(jié)合了前面的一系列機(jī)制。

1.通過模板數(shù)據(jù)綁定和虛擬DOM機(jī)制，小程序提供了帶有數(shù)據(jù)綁定語法的DSL，渲染層來描述頁面結(jié)構(gòu)。

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2.小程序在邏輯層提供了設(shè)置頁面數(shù)據(jù)的api

this.setData({
key : value
});

3.邏輯層需要更改頁面時(shí)，只要把修改后的data通過setData傳到渲染層。

傳輸?shù)臄?shù)據(jù)，會(huì)轉(zhuǎn)換為字符串形式傳輸，故應(yīng)避免傳遞大量數(shù)據(jù)。

4.渲染層會(huì)根據(jù)渲染機(jī)制重新生成虛擬DOM樹，并更新到對應(yīng)的DOM樹上，引起界面變化。

• 引入原生組件

• 繞過 setData、數(shù)據(jù)通信和重渲染流程，使渲染性能更好。

• 擴(kuò)展 Web 的能力。比如像輸入框組件（input, textarea）有更好地控制鍵盤的能力。

• 體驗(yàn)更好，同時(shí)也減輕 WebView 的渲染工作。比如像地圖組件（map）這類較復(fù)雜的組件，其渲染工作不占用 WebView 線程，而交給更高效的客戶端原生處理。

原生組件的渲染過程：

• 組件被創(chuàng)建，包括組件屬性會(huì)依次賦值。

• 組件被插入到 DOM 樹里，瀏覽器內(nèi)核會(huì)立即計(jì)算布局，此時(shí)我們可以讀取出組件相對頁面的位置（x, y坐標(biāo)）、寬高。

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

• 當(dāng)位置或?qū)捀甙l(fā)生變化時(shí)，組件會(huì)通知客戶端做相應(yīng)的調(diào)整。

以上是“微信小程序底層原理是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：微信小程序底層原理是什么
文章路徑：http://www.chinadenli.net/article6/iiioig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)