微信小程序視圖層是WebView，邏輯層是JS引擎。三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的。

運(yùn)行環(huán)境

• Android
• IOS
• 小程序開(kāi)發(fā)工具

邏輯層

• V8
• JavaScriptCore
• NWJS

渲染層

• Chromium定制內(nèi)核
• WKWebview
• Chrome Webview

2. 設(shè)計(jì)原理及組成部分

1. 雙線程模型

小程序的渲染層和邏輯層分別由2個(gè)線程管理：

• 渲染層： 界面渲染相關(guān)的任務(wù)全都在WebView里執(zhí)行。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView線程。
• 邏輯層：采用JsCore線程運(yùn)行JS腳本。

視圖層和邏輯層通過(guò)系統(tǒng)層的WeixinJsBridge進(jìn)行通信：邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁(yè)面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

頁(yè)面渲染的具體流程是: 在渲染層，宿主環(huán)境會(huì)把WXML轉(zhuǎn)化成對(duì)應(yīng)的JS對(duì)象，在邏輯層發(fā)生數(shù)據(jù)變更的時(shí)候，我們需要通過(guò)宿主環(huán)境提供的setData方法把數(shù)據(jù)從邏輯層傳遞到渲染層，再經(jīng)過(guò)對(duì)比前后差異，把差異應(yīng)用在原來(lái)的DOM樹(shù)上，渲染出正確的UI界面。 

雙線程模型是小程序框架與頁(yè)面大多數(shù)前端Web框架不同之處?；谶@個(gè)模型，可以更好地管控以及提供更安全的環(huán)境。缺點(diǎn)是帶來(lái)了無(wú)處不在的異步問(wèn)題（任何數(shù)據(jù)傳遞都是線程間的銅線，也就是都會(huì)有一定的延時(shí)），不過(guò)小程序在框架層面已經(jīng)封裝好了異步帶來(lái)的時(shí)序問(wèn)題。

2. 組件系統(tǒng)

小程序是有自己的組件的，這些基本組件就是基于Exparser 框架。Exparser 基于 WebComponents的ShadowDOM模型，但是不依賴瀏覽器的原生支持，而且可以再純JS環(huán)境中運(yùn)行。

Exparser內(nèi)置在小程序基礎(chǔ)庫(kù)中，為小程序的各種組件提供基礎(chǔ)的支持。小程序內(nèi)的所有組件，包括內(nèi)置組件和自定義組件，Exparser會(huì)維護(hù)整個(gè)頁(yè)面的節(jié)點(diǎn)樹(shù)相關(guān)信息，包括節(jié)點(diǎn)的熟悉、事件綁定等，相當(dāng)于一個(gè)簡(jiǎn)化的Shadow DOM實(shí)現(xiàn)。

3. 原生組件

在內(nèi)置組件中，有一些組件并不完全在Exparser的渲染體系下，而是由客戶端原生參與組件的渲染。比如說(shuō)Map組件。它渲染的層級(jí)比在WebView層渲染的普通組件要高。

4. 運(yùn)行機(jī)制

1.啟動(dòng)

• 熱啟動(dòng)：假如用戶已經(jīng)打開(kāi)某小程序，然后在一定時(shí)間內(nèi)再次打開(kāi)小程序，此時(shí)無(wú)需重新啟動(dòng)，只需將后臺(tái)小程序切換到前臺(tái)，這個(gè)過(guò)程就是熱啟動(dòng)；
• 冷啟動(dòng)：用戶首次打開(kāi)或小程序被微信主動(dòng)銷毀后再次打開(kāi)的情況，此時(shí)小程序需要重新加載啟動(dòng)，即冷啟動(dòng)。

2.銷毀

只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間（不知道是多久），或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

5. 更新機(jī)制

開(kāi)發(fā)者在后臺(tái)發(fā)布新版本之后，無(wú)法立刻影響到所有現(xiàn)網(wǎng)用戶，但最差情況下，也在發(fā)布之后24小時(shí)之內(nèi)下發(fā)新版本信息到用戶。

小程序每次冷啟動(dòng)時(shí)，都會(huì)檢查是否有更新版本，如果返現(xiàn)有新版本，將會(huì)異步下載最新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等下一次冷啟動(dòng)才會(huì)應(yīng)用上。

所以如果想讓用戶使用最新版本的小程序，可以利用wx.getUpateManager做個(gè)檢查更新的功能：

checkNewVersion() {
  const updateManager = wx.getUpdateManager()
  updateManager.onCheckForUpdate(res => {
    console.log('hasUpdate', res.hasUpadate) // 請(qǐng)求完新版本信息的回調(diào)
    if (res.hasUpdate) {
      updateManager.onUpdateReady(() => {
        this.setData({
          hasNewVersion: true
        })
      })
    }
  })
}
復(fù)制代碼

二、 小程序?yàn)槭裁词褂秒p線程

小程序的渲染層和邏輯層分別由兩個(gè)線程管理：渲染層的界面使用WebView進(jìn)行渲染;邏輯層采用JSCore運(yùn)行JavaScript代碼。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView。這兩個(gè)線程間的通信經(jīng)由小程序Native側(cè)中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native側(cè)轉(zhuǎn)發(fā)。 小程序架構(gòu)設(shè)計(jì)時(shí)，要求渲染快，加載快，渲染頁(yè)面的技術(shù)主要分為三種：

1. 純客戶端原生技術(shù)渲染（純客戶端技術(shù)需要與微信代碼一起編包，跟隨微信發(fā)布版本，這樣的開(kāi)發(fā)節(jié)奏不好，較難控制）；
2. 純web技術(shù)渲染（純web技術(shù)，那么一些復(fù)雜交互頁(yè)面可能面臨一些性能問(wèn)題，因?yàn)?code>Web技術(shù)中，UI和JS的腳本在單線程中，這樣容易導(dǎo)致邏輯任務(wù)搶占UI渲染資源。）
3. 介于客戶端技術(shù)和Web技術(shù)之間（Hybrid技術(shù)）。

最終選取的是類似微信JSSDK之后這樣的HyBrid技術(shù)，頁(yè)面用Web技術(shù)渲染，輔之以大量的接口提供豐富的客戶端原生能力。同時(shí)，每個(gè)小程序的頁(yè)面都是使用不同的WebView渲染。

如果開(kāi)發(fā)者可以直接通過(guò)JS操作界面的DOM樹(shù)，那么一些敏感數(shù)據(jù)就毫無(wú)安全性可言，故微信提供了一個(gè)沙箱的環(huán)境來(lái)運(yùn)行開(kāi)發(fā)者的JS代碼，這個(gè)環(huán)境不能有任何的瀏覽器相關(guān)的接口，只能通過(guò)JS解釋執(zhí)行環(huán)境，類似于HTML5的ServiceWorker啟動(dòng)另一個(gè)線程來(lái)執(zhí)行JS.

但由于小程序是多WebView的架構(gòu)，所以每一個(gè)頁(yè)面都是不同的WebView渲染顯示，所以單獨(dú)創(chuàng)建了一個(gè)線程去執(zhí)行JS，也就是邏輯層，而界面渲染的任務(wù)都在WebView線程里執(zhí)行（渲染層）。即雙線程模型，將邏輯層與視圖層進(jìn)行分離，視圖層和邏輯層之間只有數(shù)據(jù)的通信，可以防止開(kāi)發(fā)者隨意操作界面，更好的保證用戶的數(shù)據(jù)安全。