用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

簡單說說微信小程序的底層原理

Rolan 2019-11-19 00:12

小程序選擇了 Hybrid 的渲染方式,將UI渲染跟 JavaScript 的腳本執行分在了兩個線程。雙線程模型小程序的渲染層和邏輯層分別由兩個線程管理:渲染層:界面渲染相關的任務全都在 WebView線程里執行。一個小程序存在多 ...

小程序選擇了 Hybrid 的渲染方式,將UI渲染跟 JavaScript 的腳本執行分在了兩個線程。

雙線程模型

小程序的渲染層和邏輯層分別由兩個線程管理:

  • 渲染層:界面渲染相關的任務全都在 WebView 線程里執行。一個小程序存在多個界面,所以渲染層存在多個 WebView 線程。
  • 邏輯層:采用 JsCore 線程運行JS腳本,在這個環境下執行的都是有關小程序業務邏輯的代碼。

雙線程之間的通信

我們都知道小程序是避免DOM操作,而是采用數據驅動來渲染頁面的,那么他到底是怎么通過更改數據來更新DOM呢。

邏輯層和渲染層的通信會由 Native (微信客戶端)做中轉,邏輯層發送網絡請求也經由 Native 轉發。通過把 WXML 轉化為數據,通過 Native 進行轉發,來實現邏輯層和渲染層的交互和通信。

  1. 在渲染層會把WNML轉化成Js對象,Js對象會模擬DOM樹
  2. 邏輯層更新數據的時候,通過setData方法將數據從邏輯層轉發到Native,Native再轉發到渲染層
  3. 這時候,比較兩虛擬DOM樹的差異,最后將差異應用到真實DOM樹上,更新頁面。

Virtual DOM 相信大家都已有了解,大概是這么個過程:用JS對象模擬DOM樹 -> 比較兩棵虛擬DOM樹的差異 -> 把差異應用到真正的DOM樹上。

小程序的生命周期

小程序的生命周期借鑒了Android的生命周期,如果你了解過Android的APP開發,那么理解小程序的就會很簡單。

界面線程有四大狀態:

  • 初始化狀態:初始化界面線程所需要的工作,包括工作機制,基本和我們開發者沒有關系,等初始化完畢就向“服務線程”發送初始化完畢信號,然后進入等待傳回初始化數據狀態。

  • 首次渲染狀態:收到“服務線程”發來的初始化數據后(就是 json和js中的data數據),就開始渲染小程序界面,渲染完畢后,發送“首次渲染完畢信號”給服務線程,并將頁面展示給用戶。

  • 持續渲染狀態:此時界面線程繼續一直等待“服務線程”通過this.setdata()函數發送來的界面數據,只要收到就重新局部渲染,也因此只要更新數據并發送信號,界面就自動更新。

  • 結束狀態:結束渲染。

服務線程五大狀態:

  • 初始化狀態:無需和其他模塊交流,跟小程序開發也沒多大關聯,此階段就是啟動服務線程所需的基本功能,比如信號發送模塊。系統的初始化工作完畢,就調用自定義的onload和onshow, 然后等待界面線程的“界面線程初始化完成”信號。

onload是只會首次渲染的時候執行一次,onshow是每次界面切換都會執行,簡單理解,這就是唯一差別。

  • 等待激活狀態:接收到“界面線程初始化完成”信號后,將初始化數據發送給“界面線程”,等待界面線程完成初次渲染。

  • 激活狀態:收到界面線程發送來的“首次渲染完成”信號后,就進入激活狀態既程序的正常運行狀態,并調用自定義的onReady()函數。

此狀態下就可以通過 this.setData 函數發送界面數據給界面線程進行局部渲染,更新頁面。

  • 后臺運行狀態:如果界面進入后臺,服務線程就進入后臺運行狀態,從目前的官方解讀來說,這個狀態挺奇怪的,和激活狀態是相同的,也可以通過setdata函數更新界面的。畢竟小程序的框架剛推出,應該后續會有很大不同吧。

運行機制

啟動

  • 熱啟動:假如用戶已經打開過某小程序,然后在一定時間內再次打開該小程序,此時無需重新啟動,只需將后臺態的小程序切換到前臺,這個過程就是熱啟動;
  • 冷啟動:用戶首次打開或小程序被微信主動銷毀后再次打開的情況,此時小程序需要重新加載啟動,即冷啟動。

銷毀

只有當小程序進入后臺一定時間,或者系統資源占用過高,才會被真正的銷毀。

更新機制

開發者在后臺發布新版本之后,無法立刻影響到所有現網用戶,但最差情況下,也在發布之后 24 小時之內下發新版本信息到用戶。

小程序每次冷啟動時,都會檢查是否有更新版本,如果發現有新版本,將會異步下載新版本的代碼包,并同時用客戶端本地的包進行啟動,即新版本的小程序需要等下一次冷啟動才會應用上。

所以如果想讓用戶使用最新版本的小程序,可以利用 wx.getUpdateManager 做個檢查更新的功能。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: HeyWyy 來自: 掘金

提示:本頁有 1 個評論因未通過審核而被隱藏

致青春APP 股票涨跌怎么算出 金景配资 半全场 全球第一股票指数 翻翻配资 比分网球探篮球 浙江快乐彩 黑马股票推荐分析 宝利阁配资 95配资 浙江快乐12 众赢鑫配资 吉林时时彩 辽宁快乐12 股票指数期货合约的价值是股票指数与每点 钱程策略