從HybridApp到RN，再到Flutter，跨平臺技術的發展十分火熱，在平時的業務開發中，跨平臺也往往由于其動態性，開發速度，節省人力而占據越來越大的比重。以下簡單對比一下跨平臺技術

為什么純原生開發不占優勢了

原生開發的優勢

速度快，性能好。在進行一些復雜的動畫繪制時，體驗更好。

一些硬件的訪問，像攝像頭、GPS都可以直接訪問，省去了通過跨平臺框架協議兼容的中間件。

它的劣勢

僅支持特定平臺，開發成本高（Android、iOS）

動態化差，改bug基本上只能發版。

但是目前面臨的問題是

動態化需求變多了，發版更加頻繁，但是發版審核都需要時間，而且過于頻繁的版本更新也會影響用戶使用，有點跟不上互聯網的高度發展

需要Android和iOS兩端開發，兩個技術團隊，人力成本高

所以這些跨平臺技術越來越流行，大幅度壓縮了原生開發的比重。常見的跨平臺技術主要有三種

H5+原生：Hybrid

JS+原生渲染：RN

自繪UI+原生：Flutter

針對原生開發的劣勢，其實也有一些解決方案

?布局動態化，服務器下發布局，客戶端解析加載

熱修復，如騰訊的thinker等，但是對Android新版本的支持好像不是很好

Hybrid

簡單理解為網頁，webview執行h5代碼，本質上是個瀏覽器內核，js運行在權限受限的沙箱中，想訪問原生的一些功能，如藍牙，只能通過調起原生的代碼實現。基本上主要是JS通過JsBridge調用原生的一些功能。

他的優勢在于web技術棧已經很成熟了，資源都很豐富。

劣勢也很明顯，慢，性能差。復雜的業務界面及動畫，卡。

這里也有一些解決方案

?提前將頁面的公共資源html，css，js模板化，動態下發到app，在shouldInterceptRequest攔截webview的資源加載，判斷本地模板的資源就直接加載本地的，沒有則再去加載線上資源

數據請求由app代理，讓數據加載和模板代理并行執行

webivew復用，構建一個webview池，每次進入h5頁，從webview池中取出webview

圖片優化，通過shouldInterceptRequest攔截圖片資源并下載

RN

RN實際上可以理解為js+映射原生空間繪制。

以下簡單理解一下DOM樹，文檔對象模型是表示和處理一個html和xml文檔的標準接口，DOM樹就是文檔樹，與用戶界面的控件樹相對應，也可以與Android的xml布局文件的控件樹相對應

React框架運用的是典型的響應式編程，狀態改變則UI隨之改變，它是響應用戶狀態改變的事件而構建用戶界面。它的好處是

開發者只需要關心狀態（數據），狀態改變了，UI自然會改變

當接收到用戶狀態改變的通知時，根據當前渲染樹，通過diff算法，算出樹中變化的部分，然后只更新改變的部分，避免整個樹重構，提高性能

此處，React框架也不會立即就刷新界面，而是抽象出一個虛擬DOM層，改動先同步到虛擬DOM層上，然后再批量同步到真實DOM上，因為瀏覽器的每次DOM操作都可能引起瀏覽器的重繪或回流。

RN中的虛擬DOM樹最終會通過JavaScriptCore映射為原生控件樹。JSCore是一個JS解釋器，作用跟JSBridge差不多

為JS提供運行環境

是JS與原生通信的橋梁

RN中虛擬DOM樹映射為原生控件有兩步

布局消息傳遞：將虛擬DOM布局信息傳遞給原生

原生根據布局信息通過對應的原生控件渲染控件樹

它的優勢在于

web技術棧，社區大，上手快，成本低

原生渲染，比H5好很多

動態化好，支持熱更新

它的劣勢在于

渲染時需要和JS通信，某些場景下可能造成卡頓，如拖動

JS為腳本語言，執行時需要JIT，效率比AOT慢

渲染依賴原生控件，不同的平臺的控件需要單獨維護，并且系統更新，社區控件可能延時，并且收到原生控件的影響，比如存在手勢沖突問題

Flutter

Flutter是自繪引擎加原生，在不用的平臺實現一個統一的渲染引擎接口來繪制UI

它的優勢

性能高

靈活，組件庫容易維護，UI保真度和一致性高

它的劣勢

動態性不足，Flutter是AOT模式編譯的aar包，不能像JIT那樣動態下發代碼

開發效率低

Flutter相對一般的自繪引擎的優勢在于

生態原來越豐富了，Flutter社區、Github資源原來越多

Google也在推廣Flutter

開發效率上來講，Flutter的熱重載可以更快的構建UI，添加功能，修復問題

Flutter采用自己的高性能引擎繪制widget，可以保證一致性，也可以避免對原生控件的依賴。在開發時，Flutter是JIT模式，開發效率比較高，在打成release包的產物時，它是AOT模式，它的運行效率比較高。而且因為它是自己的渲染引擎，在滑動和滾動場景下具有明顯的優勢。

總結

平臺	優勢	劣勢
原生	1.能訪問平臺的全部功能 2.速度快，性能高	1.平臺特定，開發成本高 2.不支持動態化
Hybrid	web技術棧，社區資源豐富	性能差，復雜的界面和動畫，難以支持
RN	1.web技術棧，社區資源豐富，上手成本低 2.原生渲染，性能比h5高 3.支持動態化，熱更新	1.渲染時需要JS和原生通信，拖動時可能因為通信頻繁卡頓 2.執行時時JIT，執行效率低 3.渲染依賴原生控件，當系統更新時，RN的更新可能不及時
Flutter	1.Flutter社區生態越來越豐富 2.性能高，支持AOT 3.自繪UI引擎，不同平臺展示效果一致 4.開發JIT，編譯AOT	1.不支持動態化 2.開發效率低

參考

《Flutter實戰》

Android WebView H5 秒開方案總結 - 掘金

總結

以上是生活随笔為你收集整理的Android 跨平台技术对比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。