【51CTO.com原創(chuàng)稿件】七年一劍，華麗蛻變。自2012年起連續(xù)6年15場峰會(huì)，凝聚大量技術(shù)專家，博觀而約取,厚積而薄發(fā)。2018WOT全球軟件與運(yùn)維技術(shù)峰會(huì)揚(yáng)帆起航，圍繞12大核心熱點(diǎn)，匯聚海內(nèi)外60位一線專家，打造高端技術(shù)盛宴!

在 “前端工程實(shí)踐”分論壇現(xiàn)場中，魅族高級(jí)工程師張興業(yè)將給聽眾帶來一場名為《Weex技術(shù)在魅族小應(yīng)用中的實(shí)踐》的主題演講。在會(huì)前，51CTO記者采訪到了他，請他提前“劇透”，精彩演講內(nèi)容就讓我們“先睹為快”吧!

【講師簡介】

張興業(yè)主要從事應(yīng)用技術(shù)支持工作，包括Android基礎(chǔ)技術(shù)研究、Web相關(guān)技術(shù)在應(yīng)用中的使用和優(yōu)化等。現(xiàn)主要關(guān)注移動(dòng)端動(dòng)態(tài)化技術(shù)應(yīng)用和優(yōu)化以及AI技術(shù)在移動(dòng)端的使用。

張興業(yè)表示，微信小程序的發(fā)布給移動(dòng)前端開發(fā)帶來了新的思路。一直以來，魅族也在思考能不能根據(jù)自己的業(yè)務(wù)創(chuàng)造一套適合自己的小程序方案，升級(jí)現(xiàn)有的動(dòng)態(tài)化方案。也正是基于這種思考，同時(shí)結(jié)合Flyme 系統(tǒng)中有很多應(yīng)用有著重運(yùn)營屬性，魅族基于Weex技術(shù)實(shí)現(xiàn)了自己的小程序方案。

魅族為何選擇利用Weex技術(shù)來開發(fā)小應(yīng)用?

張興業(yè)坦言，魅族內(nèi)部一直在探索應(yīng)用的動(dòng)態(tài)化方案，包括：webapp、Hybrid、json2view等等。在2016年以前，魅做的更多的是Hybrid、json2view方面的，尤其是json2view，因?yàn)橄到y(tǒng)應(yīng)用對(duì)性能的要求很高，而且也有動(dòng)態(tài)化的需求，有些view就通過服務(wù)端下發(fā)json的方式，客戶端解析json數(shù)據(jù)渲染出UI或者動(dòng)畫，比如魅族的ActionView(動(dòng)視系統(tǒng))就是采用了json2view的方案。

2016年，魅族開發(fā)團(tuán)隊(duì)注意到了ReactNative和Weex，當(dāng)時(shí)團(tuán)隊(duì)對(duì)vuejs比較熟悉，所以比較傾向于使用weex，同時(shí)通過對(duì)ReactNative和Weex在基礎(chǔ)組件和性能的對(duì)比發(fā)現(xiàn)，基礎(chǔ)組件沒有差距，而且自己也能擴(kuò)展，性能方面也與ReactNative不相上下，所以最終選擇了weex。

張興業(yè)向記者介紹說，Weex是阿里2016年底開源的移動(dòng)端動(dòng)態(tài)化解決方案。它能夠***兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開發(fā)者通過簡捷的前端語法寫出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。對(duì)于移動(dòng)開發(fā)者來說，Weex幫助他們解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)，同時(shí)解決了前端語言性能差和顯示效果受限的問題。

張興業(yè)表示，在魅族小應(yīng)用的開發(fā)流程和Weex的開發(fā)流程是一樣的，魅族小應(yīng)用的渲染框架用的weex，在此基礎(chǔ)上開發(fā)時(shí)團(tuán)隊(duì)新增了很多魅族特有的接口和組件，并對(duì)自己提供的接口和組件撰寫了詳細(xì)的使用文檔，用于內(nèi)部使用方便交流。

目前，在魅族的很多小應(yīng)用采用了Weex方案，例如用戶反饋、國際流量、個(gè)人主頁、評(píng)論中心等等，已覆蓋了魅族三分之二以上的用戶。

怎樣保證小應(yīng)用的性能和穩(wěn)定性?

一個(gè)受歡迎的程序必然離不開高性能和高穩(wěn)定性，那么，怎樣做才能保證小應(yīng)用的性能和穩(wěn)定性?對(duì)此，張興業(yè)認(rèn)為，整個(gè)程序的高穩(wěn)定性和高性能離不開前后端的支持，包括渲染層的優(yōu)化。

在穩(wěn)定性和性能方面，魅族小應(yīng)用采用了魅族移動(dòng)端的穩(wěn)定性標(biāo)準(zhǔn)和性能標(biāo)準(zhǔn)，測試團(tuán)隊(duì)會(huì)對(duì)每個(gè)小程序進(jìn)行穩(wěn)定性、CPU、內(nèi)存、流量、電量以及安全等專項(xiàng)測試。同時(shí)，開發(fā)團(tuán)隊(duì)采用Weex方案，用前端的方式開發(fā)部署程序，最終在移動(dòng)端渲染成原生的方式，并在網(wǎng)絡(luò)、渲染、緩存等方面做了優(yōu)化。

我們知道，在應(yīng)用性能方面，注重的是快和流暢，是怎樣在最短的時(shí)間展現(xiàn)在用戶面前，并有最流暢的感知。一個(gè)程序展現(xiàn)在用戶面前，主要的時(shí)間花在了網(wǎng)絡(luò)下載和UI渲染方面。在網(wǎng)絡(luò)方面，魅族開發(fā)團(tuán)隊(duì)使用了GSLB(Global Server Load Balance)和CDN支持;在UI渲染方面，在weex原有基礎(chǔ)上，對(duì)復(fù)雜控件做了調(diào)整，尤其是長列表的支持。在使用Listview，長列表出現(xiàn)了內(nèi)存漲滿的情況，經(jīng)分析發(fā)現(xiàn)cell是可以重復(fù)利用的，但是數(shù)據(jù)量很大時(shí)，dom的量會(huì)很大，占用了很多的內(nèi)存。dom的數(shù)據(jù)結(jié)構(gòu)要比json數(shù)據(jù)復(fù)雜的多，需要更多的存儲(chǔ)空間。如果list的數(shù)量是可控的，通過優(yōu)化cell可以解決這個(gè)問題。但是對(duì)于list的Item數(shù)量不確定的情況，優(yōu)化cell也不能解決這個(gè)問題。最終，開發(fā)團(tuán)隊(duì)選擇通過提供cell模板的方式，讓list支持的Item數(shù)量盡量多。

采訪***，張興業(yè)建議，在小程序開發(fā)過程中，開發(fā)團(tuán)隊(duì)要精通小程序開發(fā)的相關(guān)語言，熟讀開發(fā)文檔，要有前端基礎(chǔ)，熟悉VueJS，還要多看weex的開發(fā)文檔。雖然Weex前端開發(fā)也是用的vuejs框架，但也只是一個(gè)子集。所以有很多組件或者屬性還不支持，用以前的前端經(jīng)驗(yàn)去做，實(shí)現(xiàn)的效果反而不好。

5 月 18 - 19日，北京•粵財(cái)JW萬豪酒店，全球最值得關(guān)注的IT技術(shù)盛宴與您不見不散。2018WOT全球軟件與運(yùn)維技術(shù)峰會(huì)一定是您發(fā)現(xiàn)全新思路、挖掘***思想、拓展人脈的重要平臺(tái)。

目前我們的各項(xiàng)票種已全面發(fā)售。需要提醒您的是，購票越早，折扣越大!與KOL零距離交流，呈現(xiàn)不一樣的“英雄盛宴”!

點(diǎn)擊官網(wǎng)了解詳情：wot.51cto.com

　　7折預(yù)售中，搶票從速。

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