如果想實(shí)現(xiàn)小程序方案都需要做什么?張興業(yè)認(rèn)為，如果做一個(gè)類似Weex的渲染方案，周期會(huì)比較長(zhǎng)，但是基于Weex技術(shù)去在現(xiàn)有方案上做就比較簡(jiǎn)單。首先，需要UI渲染、Native API、應(yīng)用數(shù)據(jù)緩存、以及一個(gè)系統(tǒng)級(jí)的渲染引擎。然后需要一個(gè)管理平臺(tái)，創(chuàng)建應(yīng)用，在平臺(tái)上實(shí)現(xiàn)小程序的上架、下架、升級(jí)、內(nèi)測(cè)等功能。之后，魅族基于自研的FlymeUI組件去開(kāi)發(fā)。這就是魅族開(kāi)發(fā)團(tuán)隊(duì)的做法。下圖所示是一個(gè)系統(tǒng)級(jí)渲染引擎框架。從下向上看，底層為Weex支持，主要用于渲染。

系統(tǒng)級(jí)渲染引擎框架

“還有一些module的擴(kuò)展，module擴(kuò)展主要是封裝了我們自己的服務(wù)，像登錄、推送、支付，還有上傳下載，大約封裝了九大類，上百個(gè)接口。” 張興業(yè)解釋說(shuō)：“每個(gè)小程序都運(yùn)行在獨(dú)立的進(jìn)程中，并不是共用渲染引擎這個(gè)進(jìn)程，獨(dú)立就是為了避免因小程序出錯(cuò)影響主進(jìn)程的渲染。此外，我們引入了針對(duì)圖片的緩存方案，http方案。”

魅族還構(gòu)建了高可用服務(wù)平臺(tái)體系，主要包含：一個(gè)可靠的管理系統(tǒng)，一個(gè)完善的監(jiān)控度量體系，以及多維度的數(shù)據(jù)分析系統(tǒng)。其中，監(jiān)控度量體系主要用來(lái)監(jiān)控小程序啟動(dòng)時(shí)間、頁(yè)面渲染時(shí)間、頁(yè)面滑動(dòng)幀率、各種crash日志、流量、電量等問(wèn)題和指導(dǎo)標(biāo)準(zhǔn)，通過(guò)無(wú)痕埋點(diǎn)的方式監(jiān)控卡頓、不流暢、內(nèi)存爆掉問(wèn)題;數(shù)據(jù)分析系統(tǒng)主要依托大數(shù)據(jù)的能力，通過(guò)埋點(diǎn)SDK上報(bào)數(shù)據(jù)，通過(guò)小程序ID區(qū)分。

小程序方案的重點(diǎn)優(yōu)化

那么，小程序方案重點(diǎn)優(yōu)化有哪些呢?哪些工作投入的精力比較多?在魅族的小程序開(kāi)發(fā)實(shí)踐中，主要做了四個(gè)方面的重點(diǎn)優(yōu)化，即：?jiǎn)?dòng)性能、長(zhǎng)列表、動(dòng)畫、安全。

在啟動(dòng)性能方面，怎么實(shí)現(xiàn)程序秒開(kāi)?小程序的啟動(dòng)主要分為四部分：***步，去服務(wù)端獲取應(yīng)用的信息;第二步，下載小程序，通過(guò)CDN下載***文件;第三步，對(duì)小程序進(jìn)行初始化。小程序初始化主要是包加載驗(yàn)證、manifest文件讀取;第四步，實(shí)現(xiàn)小程序首屏頁(yè)面渲染，這里主要還是依靠Weex自身的性能。因此，優(yōu)化比較多的是***步和第二步。

小程序的啟動(dòng)流程主要有以下三種方案：

很明顯，***種方案需要執(zhí)行所有的流程，耗時(shí)長(zhǎng)。第二種方案同樣耗時(shí)長(zhǎng)，影響用戶體驗(yàn)。比如在4G網(wǎng)絡(luò)環(huán)境不好的情況下，下載新版本耗時(shí)會(huì)顯著增多。相對(duì)來(lái)說(shuō)，第三種方案較好，它加入了并發(fā)執(zhí)行，一邊拉取版本信息，一邊渲染本地的緩存文件，有緩存時(shí)可以直接打開(kāi)。但是該方案也有缺點(diǎn)，長(zhǎng)期未啟動(dòng)應(yīng)用再次啟動(dòng)是老版本，而且緊急更新版本***啟動(dòng)不會(huì)體現(xiàn)。所以考慮至此，魅族提出了第四種方案，增加了重啟機(jī)制，提示有新版本需要用戶重啟。

在長(zhǎng)列表方面，Weex提供了List組件，但是在使用list組件時(shí)，它的內(nèi)存會(huì)一直增加，雖然增幅不大，但是對(duì)于長(zhǎng)列表，尤其是***列表，內(nèi)存也會(huì)增大到爆，這時(shí)應(yīng)用就會(huì)退出。在移動(dòng)應(yīng)用中，長(zhǎng)列表是使用比較頻繁的組件，基本每個(gè)應(yīng)用都會(huì)用到，對(duì)列表的優(yōu)化就放到了首要位置。我們對(duì)list組件的渲染流程做了分析，雖然weex的list組件對(duì)view做了復(fù)用，但是dom結(jié)構(gòu)數(shù)據(jù)還是在增加，從而引起內(nèi)存的增加。列表中內(nèi)容雖然很長(zhǎng)，但是結(jié)構(gòu)都一樣，dom層也適合做復(fù)用，我們以此為切入點(diǎn)，優(yōu)化了長(zhǎng)列表的內(nèi)存升高問(wèn)題。 在weex***的版本0.18.0中提供了recycle-list組件，weex官方也解決了長(zhǎng)列表內(nèi)存升高問(wèn)題，接入weex新版本的開(kāi)發(fā)者可以使用recycle-list組件代替list組件。

怎么去解決list內(nèi)存升高的問(wèn)題?現(xiàn)在，Weex0.18版本已經(jīng)能夠解決。至于低版本的，張興業(yè)建議，直接從JS發(fā)給Native，所有的vue的渲染都在原生側(cè)實(shí)現(xiàn)。原生側(cè)的vue是可以復(fù)用的，data的數(shù)據(jù)量很小，基本就沒(méi)有內(nèi)存的升高。

此外，在動(dòng)畫方面，用Weex實(shí)現(xiàn)的時(shí)候，簡(jiǎn)單動(dòng)畫是沒(méi)有問(wèn)題的，復(fù)雜動(dòng)畫還是很麻煩，而且交互性能比較低，魅族這邊使用自研的ActionView方案，ActionView完全使用Native的方式渲染，很流暢。ActionView方案也在魅族的各個(gè)應(yīng)用的Banner、主題美化的動(dòng)態(tài)壁紙、畫屏動(dòng)畫使用，如果想體驗(yàn)一下ActionView的效果，可以訪問(wèn)http://action.flyme.cn。在安全方面，主要是為了外發(fā)去考慮的，采用沙盒機(jī)制實(shí)現(xiàn)了進(jìn)程隔離和數(shù)據(jù)隔離;對(duì)用戶進(jìn)行權(quán)限控制;并根據(jù)安全域限制了http request訪問(wèn)域名……

演講***，張興業(yè)分享了一些關(guān)于接入AI和AR的一些思考。他表示，未來(lái)將有更多可能。AI模型下發(fā)將會(huì)與云端識(shí)別相結(jié)合，5G、AI助力AR再煥發(fā)新春。

以上內(nèi)容是51CTO記者根據(jù)魅族高級(jí)工程師張興業(yè)在WOT2018全球軟件與運(yùn)維技術(shù)峰會(huì)的采訪內(nèi)容整理，更多關(guān)于WOT的內(nèi)容請(qǐng)關(guān)注51cto.com。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】