本文主要介紹集中跨平臺技術(shù)解決方案、結(jié)合本人在實際開發(fā)過程中的各種體驗朗兵，對這幾種跨平臺技術(shù)進行一個點評污淋。
跨平臺技術(shù)的由來
傳統(tǒng)的純原生開發(fā)已經(jīng)不能滿足日益增長的業(yè)務(wù)需求。
- 動態(tài)化內(nèi)容需求增大余掖。當需求發(fā)生變化時寸爆，純原生應(yīng)用需要通過版本升級來更新內(nèi)容，但應(yīng)用上架盐欺、審核是需要周期的赁豆，這個周期對高速變化的互聯(lián)網(wǎng)時代來說是很難接受的，所以冗美，對應(yīng)用動態(tài)化 (不發(fā)版也可以更新應(yīng)用內(nèi)容) 的需求就變得迫在眉睫了魔种。
- 業(yè)務(wù)需求變化快，開發(fā)成本變大粉洼。由于原生開發(fā)一般都要維護 Android节预、iOS 兩個開發(fā)團隊，版本迭代時属韧，無論人力成本還是測試成本都會變大安拟。
針對原生開發(fā)面臨的問題，人們一直都在努力尋找好的解決方案宵喂，然而時至今日糠赦，已經(jīng)存在很多跨平臺框架 (注意，本書中所指的“跨平臺”若無特殊說明锅棕，即特指 Android 和 iOS 兩個平臺)拙泽，根據(jù)其原理，主要可分為如下三類裸燎。
- H5(HTML5)+ 原生 ( Cordova奔滑、 Tonic、微信小程序)顺少。
- Javascript 開發(fā) + 原生渲染 ( React Native朋其、Weex、uni-app)脆炎。
- 自繪 U+ 原生 ( QT Mobile梅猿、 Flutter)。
** 接下來秒裕，我們將逐個來了解這三類框架的原理及優(yōu)缺點袱蚓，主要講解 Hybrid、React Native几蜻、Flutter **
首先查看一下Github上的活躍度start：
| 類型 | 數(shù)量 |
|---|---|
| Flutter | 117k |
| React Native | 94.2k |
| uni-app | 30.1k |
其中 Hybrid 暫未統(tǒng)計喇潘，但是可以知道体斩，他是目前使用最多的；
介紹一下 android 底層渲染引擎 skia
Skia 是一款用 C++ 開發(fā)的颖低、性能彪悍的 2D 圖像繪制引擎絮吵，其前身是一個向量繪圖軟件。2005 年被 Google 公司收購后忱屑，因為其出色的繪制表現(xiàn)被廣泛應(yīng)用在 Chrome 和 Android 等核心產(chǎn)品上蹬敲。Skia 在圖形轉(zhuǎn)換、文字渲染莺戒、位圖渲染方面都表現(xiàn)卓越伴嗡，并提供了開發(fā)者友好的 API。
目前从铲，Skia 已然是 Android 官方的圖像渲染引擎了瘪校，因此 Flutter Android SDK 無需內(nèi)嵌 Skia 引擎就可以獲得天然的 Skia 支持；而對于 iOS 平臺來說名段，由于 Skia 是跨平臺的渣淤，因此它作為 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 閉源的 Core Graphics/Core Animation/Core Text吉嫩，這也正是 Flutter iOS SDK 打包的 App 包體積比 Android 要大一些的原因。
所有運行在Android上的應(yīng)用嗅定，最終都是通過 Skia 排版進行繪制自娩，然后通過GPU呈現(xiàn)在屏幕上；
所以 Flutter 理論上和 原生 native app 性能最接近渠退，不需要橋接通信過程忙迁，速度也最快；
缺點就是需要學(xué)習(xí)新的Dart語法货岭，以及從命令式編程思維轉(zhuǎn)換為聲明式編程健提，需要一些學(xué)習(xí)成本庄敛；
** 分別介紹一下跨平臺框架 **
H5+ 原生混合開發(fā)
這類框架的主要原理是將 APP 需要動態(tài)變動的一部分內(nèi)容通過 H5 來實現(xiàn)，通過原生的網(wǎng)頁加載控件 Webview( Android) 或 WK Webview(iOS) 來加載 (以后若無特殊說明恰梢，本書將用 Webview 來統(tǒng)一指代 Android 和 iOS 中的網(wǎng)頁加載控件)。這樣梗掰，H5 部分就可以隨時改變而不用發(fā)版嵌言，動態(tài)化需求得到滿足 ; 同時，由于 H5 代碼只需要一次開發(fā)及穗，就能同時在 Android 和 iOS 兩個平臺上正常運行摧茴，這也可以降低開發(fā)成本，也就是說埂陆，H5 部分的功能越多苛白，開發(fā)成本就越小娃豹。我們稱這種 H5+ 原生的開發(fā)模式為混合開發(fā)，對于采用混合模式開發(fā)的 APP购裙，我們稱之為混合應(yīng)用或 Hybrid APP懂版，如果一個應(yīng)用的大多數(shù)功能都是采用 H5 實現(xiàn)的話，我們稱其為 Web APP缓窜。
混合開發(fā)技術(shù)點
如之前所述定续，原生開發(fā)可以訪間平臺的所有功能，而在混合開發(fā)中禾锤，H5 代碼是運行在 Web View 中的私股， Webview 實質(zhì)上就是一個瀏覽器器內(nèi)核、其 script 依然運行在一個權(quán)限受限的沙箱中恩掷，所以對大多數(shù)系統(tǒng)能力都沒有訪向權(quán)限倡鲸、如無法訪向文件系統(tǒng)、不能使用藍牙等黄娘，所以峭状，對于 H5 不能實現(xiàn)的功能，都需要原生來實現(xiàn)逼争。
而混合框架一般都會在原生代碼中預(yù)先實現(xiàn)一些訪問系統(tǒng)能力的 API优床，然后暴露給 Webview 以供 Javascript 調(diào)用，這樣一來誓焦， Webview 就成為 Javascript 與原生 AP 之間通信的橋梁胆敞，主要負責(zé) Javascript 與原生之間調(diào)用消息的傳遞，而消息的傳遞必須遵守一個標準的協(xié)議杂伟，其規(guī)定了消息的格式與含義移层，我們將依賴于 Webview 的、用于在 Javascript 與原生之間通信并實現(xiàn)了某種消息傳輸協(xié)議的工具稱為 Webview Javascript Bridge赫粥，簡稱 Jsbridge观话，它也是混合開發(fā)框架的核心.
它的性能是最差的，一方面運行在webview中越平，一方面無法直接調(diào)原生功能频蛔、通信需要橋接；
Javascript 開發(fā) + 原生渲染
不用Webview秦叛，徹底擺脫了Webview讓人不爽的交互和性能問題
有較強的擴展性帽驯，這是因為Native端提供的是基本控件，JS可以自由組合使用
可以直接使用Native原生的「牛逼」動畫（在FB Group這個app里面书闸，面板滑出帶一點果凍彈動尼变，面板基于某個點展開這種動畫隨處可見，這種動畫用Native code來做小菜一碟，但是用Web來做就難上加難）嫌术。
效率體驗接近Native App哀澈，發(fā)布和開發(fā)成本低于Native App
Flutter
Flutter 是 Google 推出并開源的移動應(yīng)用開發(fā)框架，主要特點是跨平臺度气、高保真割按、有些性能。開發(fā)者可以通過 Dart 語言開發(fā) APP磷籍，一套代碼可以同時運行在 iOS 和 Android 平臺以上适荣。Flutter 提供了豐富的組件、接口院领，開發(fā)者可以很快地為 Flutter 添加 Native 擴展弛矛。
同時 Flutter 還可以使用 Native 引擎渲染視圖，這無疑能為用戶提供良好的體驗比然。
跨平臺自繪引擎
Flutter 與用于構(gòu)建移動應(yīng)用程序的其他大多數(shù)框架不同丈氓，因為 Flutter 既不使用 Webview，也不使用操作系統(tǒng)的原生控件强法。相反万俗， Flutter 使用自己的高性能渲染引擎來繪制 Widget。這樣不僅可以保證在 Android 和 iOS 上 UI 的一致性饮怯，而且可以避免因?qū)υ亍?/p>
件依賴而帶來的限制及高昂的維護成本闰歪。
Flutter 使用 ska 作為其 2D 渲染引擎，Skia 是 Google 的一個 2D 圖形處理函數(shù)庫蓖墅，包含字形库倘、坐標轉(zhuǎn)換，以及點陣圖置媳，且都有高效能且簡潔的表現(xiàn)，Skia 是跨平臺的公条，并且其還提供了非常友好的 API拇囊，目前 Google Chrome 瀏覽器和 Android 均采用 Skia 作為其繪圖引擎。目前靶橱， Flutter 默認支持 iOS寥袭、 Android、 Fuchsia( Google 新的自研操作系統(tǒng)) 三個移動平臺关霸。但 Flutter 亦可支持 Web 開發(fā) ( Flutter for Web) 和 PC 開發(fā)传黄。
高性能
Flutter 的高性能主要靠兩點來保證，首先队寇， Flutter APP 采用 Dart 語言開發(fā)膘掰。Dart 在 JT(即時編譯) 模式下，速度與 Javascript 基本持平。同時 Dart 還支持 AOT识埋，當以 AOT 模式運行時凡伊， Javascript 便遠遠追不上了。速度的提升對高幀率下的視圖數(shù)據(jù)計算很有幫助窒舟。其次系忙， Flutter 1 使用自己的渲染引擎來繪制 UI，布局數(shù)據(jù)等由 Dan 語言直接控制惠豺，所以在布局過程中不需要像 RN 那樣要在 Javascript 和 Native 之間通信银还。
這一點在一些滑動和拖動的場景下具有明顯的優(yōu)勢，因為滑動和拖動的過程往往會引起布局發(fā)生變化洁墙，所以 Javascript 需要與 Native 不停地同步布局信息蛹疯，這與在瀏覽器中要 Javascript 頻繁操作 DOM 所帶來的問題是相同的，都會帶來比較可觀的性能開銷扫俺。
重點：Flutter 自己有自己的渲染引擎苍苞，這樣避免了以上幾種跨平臺技術(shù)的通過中間層通信帶來的性能開銷，但是依然避免不了寫原生代碼狼纬。
總結(jié)：
對于一個web前端來說羹呵，更容易接受的 React-Native ，通過jsx進行編程疗琉，效果也最接近原生冈欢，但是如果是 原生開發(fā)的同學(xué)，建議直接上手Flutter 盈简，因為即使寫Dart凑耻，也避免不了寫原生語法；
加油柠贤！
