魅族張興業(yè)談實(shí)踐：利用Weex技術(shù)做魅族小程序
原創(chuàng)【51CTO.com原創(chuàng)稿件】“微信小程序的發(fā)布給了一個新的思路，我們可以通過小程序的思路去解決動態(tài)化的一些問題，于是我們提出了小程序的動態(tài)化方案。”在51CTO舉辦的WOT2018全球軟件與運(yùn)維技術(shù)峰會上，魅族高級工程師張興業(yè)如是說。
那么，魅族的小程序是什么?為什么選擇Weex技術(shù)做小程序?小程序的方案投入重點(diǎn)在哪里?怎樣保證小程序的性能和穩(wěn)定性?魅族小程序開發(fā)與前端開發(fā)有哪些異同點(diǎn)?接下來，本文為大家一一解讀。
魅族高級工程師張興業(yè)
利用Weex技術(shù)做魅族小程序
張興業(yè)表示，魅族小程序參考了微信小程序的思路，可以理解成是一種快應(yīng)用。廠商聯(lián)盟發(fā)布的快應(yīng)用是對外的，對開發(fā)者使用了標(biāo)準(zhǔn)的開發(fā)文檔;魅族小程序主要是對內(nèi)的業(yè)務(wù)使用，它是魅族內(nèi)部的一套無需安裝的小程序方案，集成了魅族內(nèi)部的服務(wù)、登錄、埋點(diǎn)、push、支付等。
為什么選擇Weex技術(shù)?傳統(tǒng)使用比較多的技術(shù)有WebApp、Hybrid、json2view等等，后來又出現(xiàn)了ReactNative和Weex技術(shù)，魅族都曾做過嘗試，對性能、長列表、動畫等方面做過測試，最終選擇了Weex。“我們想尋找一個動態(tài)化的方案，需要高性能、可擴(kuò)展的開發(fā)方案，而Weex的測試結(jié)果滿足我們的要求，無論是包大小、應(yīng)用啟動影響，還是頁面渲染和內(nèi)存占用等，均合乎我們的需求。” 張興業(yè)說。
Weex技術(shù)能夠幫助用戶實(shí)現(xiàn)高效開發(fā)、動態(tài)更新。這里舉兩個例子，在開發(fā)Flyme社區(qū)一個列表頁面時，如果用iOS或者安卓去開發(fā)，代碼量很多，可能300行也開發(fā)不完，而且還要寫很多布局文件。但是，采用Weex技術(shù)，僅僅50多行代碼即可解決一個列表的問題，有效縮短了開發(fā)時間。另外，魅族短視頻應(yīng)用趣視頻也是應(yīng)用了Weex技術(shù)。當(dāng)時，趣視頻預(yù)裝在系統(tǒng)內(nèi)，不能卸載掉，面對各渠道不能卸載的輿情壓力,緊急上線“趣評論 得大獎”話題活動,希望用戶登入客戶端后感受到趣視頻的“趣”味,緩解他們的負(fù)面情緒,盡可能降低輿情風(fēng)險。由于采用了基于creator的Weex方案，需求從提出到發(fā)布到用戶手上只花了不到一天的時間，實(shí)現(xiàn)快速開發(fā)、快速上線。
談?wù)匃茸逍〕绦蚍桨?/strong>
如果想實(shí)現(xiàn)小程序方案都需要做什么?張興業(yè)認(rèn)為，如果做一個類似Weex的渲染方案，周期會比較長，但是基于Weex技術(shù)去在現(xiàn)有方案上做就比較簡單。首先，需要UI渲染、Native API、應(yīng)用數(shù)據(jù)緩存、以及一個系統(tǒng)級的渲染引擎。然后需要一個管理平臺，創(chuàng)建應(yīng)用，在平臺上實(shí)現(xiàn)小程序的上架、下架、升級、內(nèi)測等功能。之后，魅族基于自研的FlymeUI組件去開發(fā)。這就是魅族開發(fā)團(tuán)隊的做法。下圖所示是一個系統(tǒng)級渲染引擎框架。從下向上看，底層為Weex支持，主要用于渲染。
系統(tǒng)級渲染引擎框架
“還有一些module的擴(kuò)展，module擴(kuò)展主要是封裝了我們自己的服務(wù)，像登錄、推送、支付，還有上傳下載，大約封裝了九大類，上百個接口。” 張興業(yè)解釋說：“每個小程序都運(yùn)行在獨(dú)立的進(jìn)程中，并不是共用渲染引擎這個進(jìn)程，獨(dú)立就是為了避免因小程序出錯影響主進(jìn)程的渲染。此外，我們引入了針對圖片的緩存方案，http方案。”
魅族還構(gòu)建了高可用服務(wù)平臺體系，主要包含：一個可靠的管理系統(tǒng)，一個完善的監(jiān)控度量體系，以及多維度的數(shù)據(jù)分析系統(tǒng)。其中，監(jiān)控度量體系主要用來監(jiān)控小程序啟動時間、頁面渲染時間、頁面滑動幀率、各種crash日志、流量、電量等問題和指導(dǎo)標(biāo)準(zhǔn)，通過無痕埋點(diǎn)的方式監(jiān)控卡頓、不流暢、內(nèi)存爆掉問題;數(shù)據(jù)分析系統(tǒng)主要依托大數(shù)據(jù)的能力，通過埋點(diǎn)SDK上報數(shù)據(jù)，通過小程序ID區(qū)分。
小程序方案的重點(diǎn)優(yōu)化
那么，小程序方案重點(diǎn)優(yōu)化有哪些呢?哪些工作投入的精力比較多?在魅族的小程序開發(fā)實(shí)踐中，主要做了四個方面的重點(diǎn)優(yōu)化，即：啟動性能、長列表、動畫、安全。
在啟動性能方面，怎么實(shí)現(xiàn)程序秒開?小程序的啟動主要分為四部分：***步，去服務(wù)端獲取應(yīng)用的信息;第二步，下載小程序，通過CDN下載***文件;第三步，對小程序進(jìn)行初始化。小程序初始化主要是包加載驗(yàn)證、manifest文件讀取;第四步，實(shí)現(xiàn)小程序首屏頁面渲染，這里主要還是依靠Weex自身的性能。因此，優(yōu)化比較多的是***步和第二步。
小程序的啟動流程主要有以下三種方案：
很明顯，***種方案需要執(zhí)行所有的流程，耗時長。第二種方案同樣耗時長，影響用戶體驗(yàn)。比如在4G網(wǎng)絡(luò)環(huán)境不好的情況下，下載新版本耗時會顯著增多。相對來說，第三種方案較好，它加入了并發(fā)執(zhí)行，一邊拉取版本信息，一邊渲染本地的緩存文件，有緩存時可以直接打開。但是該方案也有缺點(diǎn)，長期未啟動應(yīng)用再次啟動是老版本，而且緊急更新版本***啟動不會體現(xiàn)。所以考慮至此，魅族提出了第四種方案，增加了重啟機(jī)制，提示有新版本需要用戶重啟。
在長列表方面，Weex提供了List組件，但是在使用list組件時，它的內(nèi)存會一直增加，雖然增幅不大，但是對于長列表，尤其是***列表，內(nèi)存也會增大到爆，這時應(yīng)用就會退出。在移動應(yīng)用中，長列表是使用比較頻繁的組件，基本每個應(yīng)用都會用到，對列表的優(yōu)化就放到了首要位置。我們對list組件的渲染流程做了分析，雖然weex的list組件對view做了復(fù)用，但是dom結(jié)構(gòu)數(shù)據(jù)還是在增加，從而引起內(nèi)存的增加。列表中內(nèi)容雖然很長，但是結(jié)構(gòu)都一樣，dom層也適合做復(fù)用，我們以此為切入點(diǎn)，優(yōu)化了長列表的內(nèi)存升高問題。 在weex***的版本0.18.0中提供了recycle-list組件，weex官方也解決了長列表內(nèi)存升高問題，接入weex新版本的開發(fā)者可以使用recycle-list組件代替list組件。
怎么去解決list內(nèi)存升高的問題?現(xiàn)在，Weex0.18版本已經(jīng)能夠解決。至于低版本的，張興業(yè)建議，直接從JS發(fā)給Native，所有的vue的渲染都在原生側(cè)實(shí)現(xiàn)。原生側(cè)的vue是可以復(fù)用的，data的數(shù)據(jù)量很小，基本就沒有內(nèi)存的升高。
此外，在動畫方面，用Weex實(shí)現(xiàn)的時候，簡單動畫是沒有問題的，復(fù)雜動畫還是很麻煩，而且交互性能比較低，魅族這邊使用自研的ActionView方案，ActionView完全使用Native的方式渲染，很流暢。ActionView方案也在魅族的各個應(yīng)用的Banner、主題美化的動態(tài)壁紙、畫屏動畫使用，如果想體驗(yàn)一下ActionView的效果，可以訪問http://action.flyme.cn。在安全方面，主要是為了外發(fā)去考慮的，采用沙盒機(jī)制實(shí)現(xiàn)了進(jìn)程隔離和數(shù)據(jù)隔離;對用戶進(jìn)行權(quán)限控制;并根據(jù)安全域限制了http request訪問域名……
演講***，張興業(yè)分享了一些關(guān)于接入AI和AR的一些思考。他表示，未來將有更多可能。AI模型下發(fā)將會與云端識別相結(jié)合，5G、AI助力AR再煥發(fā)新春。
以上內(nèi)容是51CTO記者根據(jù)魅族高級工程師張興業(yè)在WOT2018全球軟件與運(yùn)維技術(shù)峰會的采訪內(nèi)容整理，更多關(guān)于WOT的內(nèi)容請關(guān)注51cto.com。
【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請注明原文作者和出處為51CTO.com】
