微信小程序是一個(gè)小的主要鼻子。 2017年1月9日,微信正式推出了一個(gè)小程序。在探索技術(shù)架構(gòu)之前,讓我們來(lái)看看applet,微信官方網(wǎng)站給微信Applet產(chǎn)品定位和功能介紹是:

“微信Applet是連接用戶和服務(wù)的新方法,可以方便地在微信中獲得和傳播,同時(shí)具有優(yōu)異的體驗(yàn)。”

用戶眼中的小程序

iOS:從小程序獨(dú)立角度(小程序和小程序之間,小程序在小程序和主機(jī)應(yīng)用程序之間切換),Batt的applet類似于中國(guó)商人銀行的小程序。

Android:從BATT的Applet的交互,您可以看到一個(gè)單獨(dú)的應(yīng)用程序,在后臺(tái)(多過(guò)程)中獨(dú)立存在,可以在小程序和小程序之間切換,小程序在主機(jī)應(yīng)用程序之間切換。理解小程序應(yīng)用程序的這種小程序可以直觀。中國(guó)商家銀行的小程序與主機(jī)應(yīng)用程序共存,即在一個(gè)過(guò)程中,它不能在小程序和小程序之間切換,小程序在主機(jī)應(yīng)用程序之間切換。這種類型的applet可以直觀地了解小程序頁(yè)面。

因此,從用戶的角度來(lái)看,BATT的互動(dòng)體驗(yàn)更有利。從理解小程序的概念,每個(gè)應(yīng)用都理解,但這不會(huì)影響功能級(jí)別的使用。

平臺(tái)透視

最早的應(yīng)用程序applet微信創(chuàng)建了一個(gè)小程序?它有什么作用嗎?在我看來(lái),主要目的是控制控制的目的,使用多種方法實(shí)現(xiàn),主要由兩個(gè)方面控制:

UI控制:以微信為例,微信定義了一組DSL,而不是使用HTML開(kāi)發(fā)頁(yè)面。這將不允許開(kāi)發(fā)人員在Wechat的DSL框架中發(fā)展。 DSL編寫的開(kāi)發(fā)人員的具體轉(zhuǎn)換是什么,是什么是渲染,這是一個(gè)決定的微信平臺(tái)?；诙ㄖ频腄SL,您可以更好地進(jìn)行代碼控制,例如:請(qǐng)求白名單,代碼掃描等。

服務(wù)控制:或作為微信的示例,由絲克特(如Pupant)(如付款,微信體育,優(yōu)惠券,發(fā)票,用戶賬戶信息等)提供的服務(wù)提供的服務(wù),對(duì)控制的需求進(jìn)行控制。目的也是一個(gè)不能訪問(wèn)的小程序,并且將呼叫絲網(wǎng)基本服務(wù)在不存在授權(quán)機(jī)制的前提。

小程序技術(shù)架構(gòu)

讓我們根據(jù)用戶角度的經(jīng)驗(yàn)要求,以及平臺(tái)角度的管理需求來(lái)看看Batt。小程序已經(jīng)實(shí)現(xiàn)了這些技術(shù)的技術(shù)。

主要技術(shù)點(diǎn)

DSL(特定于域名語(yǔ)言):

在我們談?wù)揇SL之前,讓我們來(lái)看看需要做什么工作。無(wú)論是一種解釋性語(yǔ)言(JS,Ruby,Python)還是編譯語(yǔ)言(Java,C ++,C#),都會(huì)有一個(gè)公共部分,可以解析到AST(抽象語(yǔ)法樹(shù))的源代碼。 AST不僅可以以結(jié)構(gòu)化方式展示源代碼,而且在語(yǔ)義分析中也發(fā)揮著關(guān)鍵作用。 AST不僅在解釋器和編譯器中應(yīng)用,而且在靜態(tài)代碼分析中也更常見(jiàn),例如我們希望在重建代碼以減少重復(fù)代碼時(shí)提取公共模塊。此時(shí),我們使用字符串比較的簡(jiǎn)單方法將比較單面無(wú)法達(dá)到效果,然后生成AST更有用。另一個(gè)應(yīng)用示例對(duì)我們的DSL設(shè)計(jì)提供了更多的參考:代碼轉(zhuǎn)換器。下圖是要轉(zhuǎn)換為另一種語(yǔ)言代碼的語(yǔ)言代碼的主要步驟:

源代碼被解析為AST。在解析之前,它是語(yǔ)言規(guī)則的文本。在分辨率之后,它將成為完全相同的樹(shù)結(jié)構(gòu),作為輸入文本,這是可逆的。然后,AST遍歷和替換,此過(guò)程類似于前端的DOM樹(shù),最后基于修改的AST生成編譯代碼。在JS作為一個(gè)例子中,我們可以使用橡子生成的AST,我們也可以使用其他解析器,例如巴比倫,esprima等。

由于applet的渲染容器,可以是WebView容器,本機(jī)本機(jī)容器和顫動(dòng)容器(雖然顫動(dòng)也是本機(jī)渲染,以便區(qū)分本機(jī)本地,這里可以單獨(dú)使用它,即同樣),所以我們可以從前一段代碼轉(zhuǎn)換器中學(xué)習(xí)這個(gè)想法,AST平滑,特定渲染容器之間的差異,

通過(guò)上述設(shè)計(jì),講述并不是很好,并且有許多需要做的工作。我們可以簡(jiǎn)單地將DSL的處理劃分為編譯時(shí)并運(yùn)行,將DSL代碼編譯為目標(biāo)代碼,并且目標(biāo)代碼可以在相應(yīng)的運(yùn)行時(shí)環(huán)境執(zhí)行。生成的目標(biāo)代碼的角色是可以通過(guò)特定運(yùn)行時(shí)的當(dāng)前環(huán)境的參數(shù)執(zhí)行實(shí)際代碼,并且簡(jiǎn)單地理解是在多呈現(xiàn)環(huán)境中運(yùn)行。

為了編譯時(shí)間,它從零明確表示。首先,我們繼續(xù)上面的AST主題,并提到了各種AST:Acorn,Babylon,Esprima。當(dāng)然,還有許多其他人,例如:Cherow,Espree,Shift等待。所以我們不必制作一個(gè)輪子,使用巴比倫,因?yàn)榘捅葌愑糜诎桶屠?它將與最接近的JS函數(shù)同步,并且使用API??設(shè)計(jì)。 Babel是一個(gè)JS編譯器(不僅僅是ES6支持的工具包,否則它將成為一個(gè)類似于Android的支持包),可用于代碼壓縮,語(yǔ)法轉(zhuǎn)換等。對(duì)于生成目標(biāo)代碼的過(guò)程:解析(Babel-Traverse)具有良好的支持。由于不同的渲染容器具有不同的組件庫(kù)和API,因此相同的功能不相同,因此必須封裝適配器層代碼。

對(duì)于運(yùn)行,您只需要生成編譯代碼的代碼執(zhí)行來(lái)生成特定的呈現(xiàn)環(huán)境。以下是Babel將ECMAScript新代碼轉(zhuǎn)換為舊版本的邏輯比較。

2.本地渲染

從性能的角度來(lái)看,applet最終由本機(jī)模式呈現(xiàn),而不是使用WebView作為渲染容器。 DSL設(shè)計(jì)可能非常好,無(wú)法屏蔽基礎(chǔ)的實(shí)際渲染的實(shí)現(xiàn)。您可以使用本機(jī)或H5,或使用兩者的組合,底層渲染引擎的切換不會(huì)影響小程序的外部訪問(wèn)。 。目前,與WEEX / RN / Flutter相比,移動(dòng)終端跨平臺(tái)本機(jī)渲染非常流行。市場(chǎng)基于WEEX和基于RN的案例。撲騰在展會(huì)后面,并且在使用verutting作為渲染引擎的情況下沒(méi)有任何情況。

3. Android多進(jìn)程:

正如我們從用戶角度的“小程序”部分所看到的那樣,BATT方案使小程序真正做與申請(qǐng)相同的經(jīng)驗(yàn)。由于IOS應(yīng)用程序無(wú)法打開(kāi)新進(jìn)程,因此applet在獨(dú)立的過(guò)程中運(yùn)行,因此iOS中的applet只能與主機(jī)應(yīng)用程序共享相同的進(jìn)程。對(duì)于Android,它不一樣,小程序占用了獨(dú)立的過(guò)程。從安全角度來(lái)看,第二方后一方三方小程序應(yīng)用程序是從主機(jī)應(yīng)用程序流程中孤立的,以及小程序不會(huì)影響主機(jī)應(yīng)用程序的問(wèn)題。此外,從性能透視圖,applet不共享主機(jī)應(yīng)用程序的內(nèi)存。從BATT的實(shí)際應(yīng)用操作,它基本上控制了五個(gè)背景開(kāi)放式啟用的過(guò)程。您可以使用五個(gè)容器活動(dòng)在您自己的進(jìn)程中呈現(xiàn)小程序,有些將具有后端時(shí)間限制。 。打開(kāi)一個(gè)新的applet,關(guān)閉最早的開(kāi)放小程序過(guò)程,這已經(jīng)實(shí)現(xiàn)了有效的熱啟動(dòng)目標(biāo)。

4.多線程:邏輯渲染隔離:

首先,讓我們討論一個(gè)小程序的邏輯和渲染,然后與特定的多線程聊天。當(dāng)然,小程序的邏輯和渲染可以從功能級(jí)別分開(kāi),沒(méi)有可以實(shí)現(xiàn)分離。這里的邏輯和渲染分離是指小程序在單獨(dú)的JS環(huán)境中的邏輯運(yùn)行,并且只需要JS引擎,渲染在WebView線程中運(yùn)行。邏輯和渲染已分為兩個(gè)線程。有幾個(gè)好處:首先是邏輯和渲染代碼分離未耦合,第二個(gè)是執(zhí)行邏輯線程和呈現(xiàn)線程并行,并且JS執(zhí)行不會(huì)阻止UI。第三是為了補(bǔ)充UI控制,邏輯線程的目的,在JS引擎中運(yùn)行,而不是在WebView中,限制了通過(guò)注入JS代碼操作DOM的可能性,任何與UI相關(guān)API相關(guān)的任何相關(guān)的API就無(wú)法改變通過(guò)JS,因此它是使用DSL控制UI控件的目的。第四個(gè)好處是多個(gè)小程序頁(yè)面共享相同的JS邏輯操作環(huán)境,可以輕松富有高效的共享數(shù)據(jù)。

優(yōu)化:

在邏輯和渲染分離之后,邏輯線程需要將數(shù)據(jù)發(fā)送到呈現(xiàn)線程,呈現(xiàn)線程需要將事件發(fā)送到邏輯線程,這需要序列化傳輸。這將帶來(lái)問(wèn)題,頻繁的數(shù)據(jù)傳輸和單個(gè)大數(shù)據(jù)卷傳輸將帶來(lái)性能問(wèn)題。在響應(yīng)這個(gè)問(wèn)題時(shí),ahipay應(yīng)用程序的設(shè)計(jì)思想是值得的,apagay小程序重新設(shè)計(jì)的V8虛擬機(jī),讓邏輯和渲染有自己的本地運(yùn)行時(shí),存儲(chǔ)私有模塊和數(shù)據(jù)。它還提供共享的全局運(yùn)行時(shí)共享堆來(lái)共享數(shù)據(jù),該數(shù)據(jù)仍然是邏輯和渲染隔離,并降低序列化和傳輸成本。

5.預(yù)加載:

applet的開(kāi)發(fā)人員在小程序應(yīng)用程序中進(jìn)行了大量?jī)?yōu)化,例如數(shù)據(jù)預(yù)加載。從用戶點(diǎn)擊頁(yè)面,轉(zhuǎn)到在線onload(),將延遲100ms-300ms,這種延遲時(shí)間,可以做數(shù)據(jù)預(yù)加載。這里提到的小程序是預(yù)裝的,這是一個(gè)小程序渲染幀級(jí)別。 iOS優(yōu)化將在實(shí)際渲染中預(yù)加載比一個(gè)wkwebview,打開(kāi)新的小程序直接呈現(xiàn)預(yù)加載的wkwebview,保存初始化時(shí)間; Android有點(diǎn)復(fù)雜,但仍然是空間更改來(lái)自Android的時(shí)間主機(jī)應(yīng)用程序啟動(dòng),啟動(dòng)保留流程,當(dāng)新小程序打開(kāi)時(shí),將占用此過(guò)程并準(zhǔn)備新過(guò)程,直到第五個(gè)過(guò)程的上限已打開(kāi)。

6.離線包裝(子封面):

脫機(jī)包機(jī)制的基本目的是讓頁(yè)面資源在開(kāi)放小程序時(shí)替換本地IO。實(shí)際上,在App打開(kāi)之前打開(kāi)應(yīng)用程序之前,可以在本地本地地本地包裹。脫機(jī)包模塊的職責(zé)包括:更新,解壓縮,存儲(chǔ),閱讀和檢查,當(dāng)然,當(dāng)然可以進(jìn)行二進(jìn)制差異。使用離線包機(jī)制,還需要將整個(gè)過(guò)程視為將影響效率的離線包。因此,有必要增加訂閱,并且可以將脫機(jī)包劃分為主包和多個(gè)子電卡。該包主要包括:諸如第一個(gè)屏幕,公共代碼,相關(guān)子紙牌等信息;子片段可以包含輔助頁(yè)面的頁(yè)面資源

III技術(shù)選擇

ide.

小程序平臺(tái)有自己的IDE,對(duì)于多系統(tǒng)平臺(tái)的當(dāng)前情況,選擇跨平臺(tái)桌面技術(shù)來(lái)開(kāi)發(fā)一個(gè)小程序IDE,絕對(duì)是最佳選擇。

2. JS發(fā)動(dòng)機(jī)

如前所述,邏輯層具有單獨(dú)的JS環(huán)境,其還示出了這一點(diǎn),以防止JS從控制透視圖中修改UI的風(fēng)險(xiǎn)。在技??術(shù)選擇方面,iOS可以使用本身,雖然IOS上的JS引擎比JSCORE更多,但執(zhí)行速度非?？?但它與其他JS引擎相比,使用Combo JS發(fā)動(dòng)機(jī)具有先天性優(yōu)勢(shì)這是穩(wěn)定的,不會(huì)增加包裝的大小。這件作品可能會(huì)提及,顫動(dòng)引入iOS中的滑雪渲染引擎。撲騰引入Skia在iOS中的好處是與滑雪發(fā)動(dòng)機(jī)配有Android的同一個(gè)渲染引擎,這將在UI兼容性方面更好。增加。 JS引擎兼容性問(wèn)題要小得多。

舊版本的微信Applet使用JScore,新版本的V8;支付寶小程序是重新設(shè)計(jì)的v8;標(biāo)題小程序也是V8;您可以看到V8的獲勝率仍然很高,開(kāi)源協(xié)議也是可比的友好。

概括

本文是一個(gè)小程序渲染架構(gòu)的實(shí)現(xiàn)。就小程序平臺(tái)本身而言,還有其他功能和優(yōu)化點(diǎn),例如小程序,調(diào)試包,埋地點(diǎn),虛擬DOM優(yōu)化等。本文僅介紹了一些主要的流程和技術(shù)要點(diǎn),真正是一個(gè)完美的小程序平臺(tái)或需要大量的細(xì)節(jié),有必要考慮,還有一個(gè)優(yōu)化的空間,例如:骨架屏幕。為了使一個(gè)小程序平臺(tái)需要多平臺(tái)綜合應(yīng)用程序來(lái)不斷改進(jìn),隨著新技術(shù)的出現(xiàn),將來(lái)會(huì)有更多的技術(shù)。