前言
現(xiàn)在主流的移動(dòng)開發(fā)平臺(tái)是Android和iOS，每個(gè)平臺(tái)的開發(fā)技術(shù)和運(yùn)行方式都不一樣，大家都是針對(duì)每個(gè)平臺(tái)開發(fā)應(yīng)用。自然會(huì)存在一個(gè)移動(dòng)應(yīng)用產(chǎn)品要針對(duì)每個(gè)平臺(tái)開發(fā)一套的現(xiàn)象，這樣帶來的問題則是開發(fā)成本高、效率低下，進(jìn)而會(huì)有進(jìn)行跨平臺(tái)開發(fā)的需求。從最開始以Cordova為基礎(chǔ)的Hybrid混合開發(fā)技術(shù)，到React Native的橋接技術(shù)，到現(xiàn)在新興的Flutter技術(shù)，跨平臺(tái)開發(fā)技術(shù)一直在演進(jìn)。
目前主流跨平臺(tái)框架簡(jiǎn)介
Cordova
Cordova 是Apache旗下的一個(gè)開源的移動(dòng)開發(fā)框架。它允許你使用WEB開發(fā)技術(shù)（HTML5、CSS3、JavaScript）進(jìn)行跨平臺(tái)開發(fā)。應(yīng)用在每個(gè)平臺(tái)的封裝器中執(zhí)行，并且依賴規(guī)范的API對(duì)設(shè)備進(jìn)行高效的訪問，比如傳感器、數(shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等等。
Cordova通過對(duì)HTML、CSS、JS封裝為原生APP。Cordova將不同設(shè)備的功能，按標(biāo)準(zhǔn)進(jìn)行了統(tǒng)一封裝，開發(fā)人員不需要了解設(shè)備的原生實(shí)現(xiàn)細(xì)節(jié)，并且提供了一組統(tǒng)一的JavaScript類庫，以及為這些類庫所使用的設(shè)備相關(guān)的原生后臺(tái)代碼。因此實(shí)現(xiàn)了“write once, run anywhere”(一次開發(fā)，隨處運(yùn)行)。
Cordova前身是PhoneGap。2011年Adobe公司將其收購對(duì)其開源，并捐獻(xiàn)給Apache，重新命名為Cordova。
React Native
React Native讓開發(fā)者使用JavaScript和React編寫應(yīng)用，利用相同的核心代碼就可以創(chuàng)建Web,iOS和Android平臺(tái)的原生應(yīng)用。React Native著力于提高多平臺(tái)的開發(fā)效率-----僅需學(xué)習(xí)一次，編寫任何平臺(tái)（Learn once, write anwhere）。
React Native支持標(biāo)準(zhǔn)平臺(tái)組件使用，在iOS平臺(tái)我們可以使用UITaBar控件，在Android平臺(tái)我們可以使用rawer控件。這樣App從使用上和視覺上擁有像原生App一樣的體驗(yàn)。
2015年9月15日，F(xiàn)acebook發(fā)布了React Native for Android，把Web和原生平臺(tái)的JavaScript開發(fā)技術(shù)擴(kuò)展到了Google的流行移動(dòng)平臺(tái)。
Flutter
Flutter是面向iOS和Android應(yīng)用，提供一套基礎(chǔ)代碼（使用Dart語言）的高性能高可靠軟件開發(fā)工具包，使開發(fā)者能夠在iOS和Android兩個(gè)主要的移動(dòng)平臺(tái)上，打造統(tǒng)一代碼的高性能應(yīng)用。
Flutter能夠在iOS和Android上運(yùn)行起來，依靠的是一個(gè)叫Flutter Engine的虛擬機(jī)，F(xiàn)lutter Engine是Flutter應(yīng)用程序的運(yùn)行環(huán)境，開發(fā)人員可以通過Flutter框架和API在內(nèi)部進(jìn)行交互。
在2017年的谷歌I/O大會(huì)上，Google推出了Flutter----一款新的用于創(chuàng)建移動(dòng)應(yīng)用的開源庫。在2018年初世界移動(dòng)大會(huì)上發(fā)布Flutter的第一個(gè)Beta版本，2018年5月的I/O大會(huì)上更新到了Beta3版本，向正式版本有邁進(jìn)了一步。
移動(dòng)端跨平臺(tái)開發(fā)技術(shù)演進(jìn)
以往最早的以Cordova為代表的Hybrid開發(fā)，主要依賴于WebView。但是WebView是一個(gè)很重的控件，很容易產(chǎn)生內(nèi)存問題，而且復(fù)雜的UI在WebView上顯示的性能不好。JS與Native代碼之間的通信需要使用JSBridge進(jìn)行上下文切換，因此會(huì)降低一些性能。
上圖是Cordova框架原理
React Native技術(shù)拋開了WebView，利用JavaScriptCore來做橋接，將JS調(diào)用轉(zhuǎn)為native調(diào)用，只犧牲了小部分性能獲取的跨平臺(tái)開發(fā)，這是一大步進(jìn)步。但是由于依然存在一個(gè)從JS代碼到原生代碼的轉(zhuǎn)化過程，在界面UI被頻繁操作的情況下，可能會(huì)導(dǎo)致性能問題。
上圖React Native框架原理
Flutter實(shí)現(xiàn)跨平臺(tái)采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScriptCore，而是自己實(shí)現(xiàn)了一臺(tái)UI框架，然后直接系統(tǒng)更底層渲染系統(tǒng)上畫UI。所以他采用的開發(fā)語言不是JS，而是Dart。據(jù)稱Dart語言可以編成原生代碼。
上圖是Flutter框架原理圖
關(guān)于性能
跨平臺(tái)開發(fā)第一個(gè)考慮的就是性能問題
l Cordova的基礎(chǔ)是html和js運(yùn)行在webView容器里面，通過Cordova提供的接口與硬件通訊；所以它的小路天生受到限制，而且也受到了各個(gè)廠商對(duì)webkit內(nèi)核支持的好壞；比如之前基于國(guó)產(chǎn)某Cloud的程序，在華為手機(jī)上顯示就不正常，花費(fèi)不少精力修改。
l React Native的效率由于是將View編譯成了原生View，所以效率上要比基于Cordova的HTML5高很多，但是它也有效率問題。React Native的渲染機(jī)制是基于前端框架的考慮，復(fù)雜的UI渲染是需要依賴多個(gè)view疊加。比如我們渲染一個(gè)復(fù)雜的ListView，每一個(gè)小的控件，都是一個(gè)native的view，然后相互組合疊加。想想此時(shí)如果我們的list再需要滑動(dòng)刷新，會(huì)有多少個(gè)對(duì)象需要渲染。所以它的列表方案不友好。
l Flutter吸收了前兩者的教訓(xùn)之后，在渲染技術(shù)上，選擇了自己實(shí)現(xiàn)（GDI），由于有更好的可控性，使用了新的語言Dart，避免了React Native的那種通過橋接器與JavaScript通訊導(dǎo)致效率低下的問題，所以在性能方面比React Native更高一籌。打開Android手機(jī)開發(fā)者選項(xiàng)里面的顯示邊界布局，發(fā)現(xiàn)Flutter的布局是一個(gè)整體，說明Flutter的渲染沒用原生控件進(jìn)行渲染。
自身優(yōu)缺點(diǎn)列舉
Cordova
優(yōu)勢(shì)：
iOS和Android基本上可以共用代碼，純web思維，開發(fā)速度快， 簡(jiǎn)單方便，一次編碼，到處運(yùn)行。如果熟悉web開發(fā)，文檔很全， 系統(tǒng)級(jí)支持封裝較好，所有UI組件都是有html模擬，可以統(tǒng)一 使用。
可實(shí)現(xiàn)在線更新，允許動(dòng)態(tài)加載web js
文檔多，開發(fā)者多，遇到問題容易解決，技術(shù)成熟
劣勢(shì)：
占用內(nèi)存高一些，不適合做游戲類型app, web技術(shù)午無法解決一 切問題，對(duì)于比較耗能的地方無法利用native的思維實(shí)現(xiàn)優(yōu)勢(shì)互 補(bǔ)，如高體驗(yàn)的交互，動(dòng)畫等。
React Native
優(yōu)勢(shì)：
雖然不能做到一次編碼到處運(yùn)行，但是基本上即使是兩套代碼， 也是相同的jsx語法， 使用js進(jìn)行開發(fā)。用戶體驗(yàn)高于html， 開發(fā)效率較高
Flexbox布局據(jù)說比native的自適應(yīng)布局更加簡(jiǎn)單高效
可實(shí)現(xiàn)在線更新2015.7.28 AppStore審核政策調(diào)整：允許運(yùn)行于JavaSriptCore的動(dòng)態(tài)加 載代碼。更貼近于原生開發(fā)
劣勢(shì)：
對(duì)開發(fā)人員要求較高，不是懂點(diǎn)web技術(shù)就行的，當(dāng)官方封裝的 控件、API無法滿足需 求時(shí)就必然需要懂一些native的東西去 擴(kuò)展，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web，也遠(yuǎn)遠(yuǎn)不如直 接寫Native Code。
官方說的很隱晦：learn once， write anywhere。人家可run anwhere。就是針對(duì)不同的 平臺(tái)需要些多套代碼。
Flutter
優(yōu)勢(shì)：
高生產(chǎn)效率。一套代碼可以開發(fā)出Android和iOS應(yīng)用；Dart語 言優(yōu)越性，使得同樣的 功能只需要很少的代碼；迭代更加方便， hot reload功能；
創(chuàng)建優(yōu)雅的、高度可定制的用戶界面。Flutter內(nèi)置了對(duì)Material Design和Cupertino（iOS-favor）的UI組件庫；提供了可定制 的UI組件，不再受制于OEM控件的限制；
借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運(yùn)行 時(shí)以達(dá)到跨平臺(tái)的高質(zhì)量用戶體驗(yàn)。
劣勢(shì)：
Flutter采用Dart語言開發(fā)，屬于小眾語言，需要一切都要重新 學(xué)習(xí)。
Flutter現(xiàn)在還處在Beta階段，第三方庫很少。
總結(jié)
在跨平臺(tái)開發(fā)這件事情上人們一直沒有停止去尋找更好、更憂的解決方案。這些框架雖然平臺(tái)系統(tǒng)的UI框架可以取代，但是系統(tǒng)提供的一些服務(wù)是無法取代的。所以優(yōu)化的再好都沒有原生來的流暢、性能好，但是能夠接受去妥協(xié)一些缺點(diǎn)是可以給企業(yè)提供更多的開發(fā)選擇。
Cordova誕生最早收獲開發(fā)者和相關(guān)技術(shù)支持較多，使用起來遇到問題比較好解決。因?yàn)榧僿eb開發(fā)思維性能比較低，比較適合多信息展示少交互對(duì)性能沒有這么高要求的應(yīng)用。
React Native出現(xiàn)相對(duì)較早，它優(yōu)化了早期Hybrid混合開發(fā)中的性能問題使其在平臺(tái)表現(xiàn)接近于原生應(yīng)用。同時(shí)因?yàn)樾阅苌系膬?yōu)化也妥協(xié)了一次編寫到處運(yùn)行的一套代碼好處，但不影響它是目前最成熟、最受歡迎的移動(dòng)開發(fā)框架。
Flutter出現(xiàn)相對(duì)較晚，從目前官網(wǎng)介紹和Beta版測(cè)試可知性能和速度上更優(yōu)秀，但使用Dart小眾語言還取決于行業(yè)內(nèi)的接受態(tài)度，新技術(shù)可能會(huì)存在一些未知的問題，還需要時(shí)間的檢驗(yàn)。
總的來說，以上整理分析的框架的優(yōu)劣都是相互的，根據(jù)產(chǎn)品需求和企業(yè)技術(shù)方向以及技術(shù)人員的具體情況，選擇最合適的就是最好的。
參考資料：
https://blog.csdn.net/ahence/article/details/79435378
http://szuwest.github.io/flutterkuang-jia-yan-jiu-he-yu-rndui-bi.html
https://blog.csdn.net/zhangzeshuai/article/details/80151710
https://blog.csdn.net/timtian008/article/details/54890514
http://www.itdecent.cn/p/06acf2d8ba61
2018.7.24
