Flutter VS React Native VS 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》開源