Flutter VS React Native VS Native，誰才是效能之王

xiangzhihong發表於2020-04-18
FlutterReact Native

背景

多年以前，當我們討論什麼是構建移動應用程式最流行的解決方案時，總會將原生開發和跨平臺開發進行對比，也總會有人提出“跨平臺應用程式速度慢”的刻板問題。對於跨平臺技術及其應用開發，我們不能單一的從效能進行考慮，還應該從開發效率、公司業務場景等多方面進行評估。

總的來說，跨平臺開發在開發效率上是有了很大的提升，應該的效能在經過優化之後也是可以接受的。目前，主流的跨平臺技術主要可以分為三類：一種是使用原生內建的瀏覽器載入HTML5的Hybrid技術，採用此方案的主要有Cordova、Ionic和微信小程式；另一種是使用JavaScript開發，然後使用原生元件進行渲染，採用此方案的主要有React Native、Weex和快應用；最後一種是使用自帶的渲染引擎和自帶的原生元件實現跨平臺，採用這種方案的主要是Flutter。

效能對比

對比指標

目前，對於應用效能的對比有很多種，但以下幾條資料是必不可少的，包括：

  • 介面（API）：與手機應用程式介面互動(訪問照片、檔案系統、獲取GPS位置等)。

  • 業務邏輯：數學計算和記憶體操作的速度，該效能對具有複雜業務邏輯的應用程式來說最為重要。

  • 頁面渲染速度：動畫平滑度、使用者介面改變時的每秒幀數或一些實時出現的使用者介面效果。

對比資料

下面就橫向對比下Flutter、React Native和原生平臺在效能上的表現，通過執行同一個應用程式然後檢視在不同指標下的效能，資料來源於網路。

iOS作業系統CPU密集型測試(高斯-勒讓德演算法)

在這裡插入圖片描述
可以發現，在 CPU密集型計算測試中，Objective-C是iOS開發的最佳程式語言，Swift比Objective-C慢1.7倍， 意料之外的是Flutter比Swift快15%， React Native比Objective-C慢20倍。

iOS作業系統CPU密集型測試(博爾溫演算法)

在這裡插入圖片描述
在博爾溫演算法中，Swift比Objective-C慢1.9倍， Flutter比Swift慢5倍，React Native版本比Swift版本慢15倍以上。

安卓系統CPU密集型測試(高斯-勒讓德演算法）

在這裡插入圖片描述
在Android開發中，Java和Kotlin效能指標相似，是Android開發的最佳選擇， Flutter比單一平臺方法約慢20%， React Native約比單一反應速度慢15倍。

安卓系統CPU密集型測試(博爾溫演算法)

在這裡插入圖片描述
可以發現，使用 博爾溫演算法後，Java和Kotlin效能指標相似，是Android開發的最佳選擇， 單一平臺方式比Flutter快2倍，React native約比單一平臺方式反應速度慢6倍。

上面的對比資料都是經過測試100次得到的，原始碼在github.com/nazarcybuls…

對比發現，在移動應用開發中，原生開發出來的應用效能仍然是最好的，但是考慮到開發效能，那麼使用Flutter也是不錯的選擇。下面是我最近將要出版的一本關於Flutter應用開發的書籍，暫定名稱為《Flutter跨平臺應用實戰》，書目如下：

在這裡插入圖片描述

Flutter肺炎疫情應用

2020年註定是一個不平淡的年份，新年伊始，一場新型冠狀病毒肺炎疫情席捲全國，不斷更新的新型冠狀病毒肺炎疫情資料讓不少民眾產生了焦慮，不少城市採取的封城措施也給大家的生活帶來諸多不便。在這場全國性的新型冠狀病毒肺炎疫情的影響下，大多數線下商業，特別是實體店在一夜之間歇業，其中人員密集型的餐飲、旅遊和文化活動等行業深受其害。

面對疫情來襲，隔離是最有效的預防和控制手段，也成為牽引商業模式變革的重要變數。面對嚴峻的疫情形勢，即便是春節假期，各種走親訪友、商業往來、逛街購物等活動都統統按下了“暫停鍵”。同時，各級政府積極響應抗災防疫，做到及時的隔離，並提供及時疫情發展資訊，為防疫贏得寶貴時間。

2020年的春節是慘淡的，也是悲傷的，疫情的發生讓我們每個人都始料不及，但是在這場戰役裡，全國人民團結一心、眾志成城，相信一定會戰勝肺炎疫情。肺炎疫情應用正是基於這一現實開發的一款工具類應用，提供肺炎疫情最新的發展資訊，以及提供一些防護措施。如下是新冠肺炎疫情應用的部分效果。

在這裡插入圖片描述

開源庫

在Flutter應用開發過程中，系統提供的元件和API並不能滿足全部的開發需求，為了快速的完成開發任務，大多數情況下需要使用一些第三方的開源庫，以下是本專案使用的部分開源庫，如下所示。

cupertino_icons: ^0.1.2           //圖示庫
dio: 3.0.9                      //網路請求庫
fluro: 1.5.2                     //路由導航庫
provide: 1.0.2                   //狀態管理庫
webview_flutter: 0.3.19+8         //WebView庫
device_info: 0.4.1+5              //裝置版本資訊庫
pull_to_refresh: 1.5.8              //下拉重新整理
flutter_swiper: 1.1.6               //Swiper庫
cached_network_image: 2.0.0       //網路圖片
shared_preferences: 0.5.6+2         //持久化資料庫
intl: 0.16.1                       //國際化
open_file: 3.0.1                   //檔案選擇
url_launcher: 5.4.2                //開啟第三方應用
connectivity: 0.4.8+1              //網路狀態監聽
photo_view: ^0.9.2               //大圖預覽
fluttertoast: ^3.1.3               //Toast訊息提示
syncfusion_flutter_charts: ^18.1.0   //圖表元件庫

複製程式碼

使用時，只需要在pubspec.yaml檔案中新增這些第三方開源庫即可。

為了方便廣大的開發者進行入門學習，已經在Git上進行了開源，歡迎Fork和Star，下載連結：新冠肺炎疫情應用。

參考資料： 1，移動跨平臺方案對比：WEEX、React Native、Flutter和PWA
2，Flutter入門與環境搭建
3，Flutter開發之Dart語言基礎
4，Flutter基礎知識
5，Flutter開發之基礎Widgets
6，Flutter 應用程式除錯
7，Flutter For Web入門實戰
8，Flutter開發之非同步程式設計
9，Flutter開發之網路請求
10，Flutter開發之JSON解析
11，Flutter開發之路由與導航
12，Flutter 必備開源專案
13，Flutter 國際化適配實戰
14，Flutter應用整合極光推送
15，Flutter混合開發
16，構建屬於自己的Flutter混合開發框架
17，Flutter 應用效能檢測與優化
18，Flutter異常監測與上報
19，Flutter的Hot Reload是如何做到的
20，Apple為什麼不封殺 Flutter，以後會封殺嗎
21，《Flutter in action》開源

相關文章