您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序底層原理是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
頁面渲染的方式主要有三種
1.web渲染
2.Native原生渲染
3.web與Native兩者摻雜,即Hybrid渲染。
小程序的呈現(xiàn)形式為第三種。
雙線程通信方式
為什么要雙線程 ? -> 為了管控安全,避免操作DOM。
小程序的渲染層和邏輯層分別由 2 個線程管理:渲染層的界面使用了 WebView 進行渲染,邏輯層采用 JsCore 線程運行 JS 腳本。
微信小程序的框架包含兩部分 view視圖層、APP service邏輯層。
view層用來渲染頁面結構,
AppService用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用。
在兩個進程(兩個webview)里運行。
視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信。
邏輯層: 創(chuàng)建一個單獨的線程去執(zhí)行JavaScript,在這個環(huán)境下執(zhí)行的都是有關小程序業(yè)務邏輯的代碼
渲染層: 界面渲染相關的任務全都在webView線程中執(zhí)行,通過邏輯層的代碼去控制渲染哪些界面。
一個小程序存在多個界面,所以渲染層存在多個webview線程。
邏輯層和渲染層的通信會由Native(微信客戶端)做中轉,
邏輯層發(fā)送網(wǎng)絡請求也會經(jīng)由Native轉發(fā)。
evaluate Javascript
視圖層和邏輯層的數(shù)據(jù)傳輸,實際上通過兩邊提供的evaluateJavascript實現(xiàn)。即用戶傳輸?shù)臄?shù)據(jù),需要將其轉換為字符串形式傳遞,同時把轉換后的數(shù)據(jù)內(nèi)容拼接成一份JS腳本,在通過JS腳本的形式傳遞到兩邊獨立環(huán)境。
因為evaluateJavascript的執(zhí)行會受很多方面的影響,數(shù)據(jù)到達視圖層并不是實時的。隨意我們的setData函數(shù)將數(shù)據(jù)從邏輯層發(fā)送到視圖層,是異步的。
模板數(shù)據(jù)綁定方案
1.解析語法生成AST
2.根據(jù)AST結果生成DOM
3.將數(shù)據(jù)綁定更新至模板
抽象語法樹(abstract syntax tree或者縮寫為AST)
最容易引發(fā)性能問題的主要是第三點,而關于數(shù)據(jù)更新的解決方案,React首先提出了虛擬DOM的設計,而現(xiàn)在也基本被大部分框架吸收,小程序也不例外。
虛擬 DOM 機制 virtual Dom
用JS對象模擬DOM樹 -> 比較兩個DOM樹 -> 比較兩個DOM樹的差異 -> 把差異應用到真正的DOM樹上
1.在渲染層把WXML轉化成對應的JS對象
2.在邏輯層發(fā)生數(shù)據(jù)變更的時候,通過宿主環(huán)境提供的setData方法把數(shù)據(jù)從邏輯層傳遞到Native,再轉發(fā)到渲染層
3.經(jīng)過對比前后差異,把差異應用在原來的DOM樹上,更新界面
小程序的基礎庫
小程序的基礎庫是JavaScript編寫的,它可以被注入到渲染層和邏輯層運行。主要用于:
在渲染層,提供各類組件來組件頁面的元素
在邏輯層,提供各種API來處理各種元素。
處理數(shù)據(jù)綁定、組件系統(tǒng)、事件系統(tǒng)、通信系統(tǒng)等一系列框架邏輯
小程序的渲染層和邏輯層是兩個線程管理,兩個線程各自注入了基礎庫。
小程序的基礎庫不會打包在小程序的代碼中,它會被提前內(nèi)置在微信客戶端。這樣可以:
降低業(yè)務小程序的代碼包大小
可以單獨修復基礎庫中的Bug,無需修改到業(yè)務小程序的代碼包
Exparser
Exparser是微信小程序的組件組織框架,內(nèi)置在小程序基礎庫中,為小程序的各種組件提供基礎支持。小程序內(nèi)所有組件,包括內(nèi)置組件和自定義組件,都有Exparser組織管理。
雙線程的渲染機制
雙線程的渲染,其實是結合了前面的一系列機制。
1.通過模板數(shù)據(jù)綁定和虛擬DOM機制,小程序提供了帶有數(shù)據(jù)綁定語法的DSL,渲染層來描述頁面結構。
<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>
2.小程序在邏輯層提供了設置頁面數(shù)據(jù)的api
this.setData({ key : value });
3.邏輯層需要更改頁面時,只要把修改后的data通過setData傳到渲染層。
傳輸?shù)臄?shù)據(jù),會轉換為字符串形式傳輸,故應避免傳遞大量數(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ū)域渲染界面。
當位置或寬高發(fā)生變化時,組件會通知客戶端做相應的調(diào)整。
以上是“微信小程序底層原理是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。