Flutter和原生APP的性能對比
前言
自從今年google IO大會推出flutter跨平臺開發框架以來，flutter在各個技術論壇裡被吵得如日中天。flutter團隊直言flutter可以幫助開發者輕鬆實現恆定60fps的性能體驗。
我們知道flutter跨平臺的原理是採用dart語言預編譯的方式直接編譯出各個平臺的原生代碼，而不需要類似RN用JavaScript橋接器執行原生代碼。那麼這樣做的性能究竟如何呢？是否能達到和原生一樣的流暢度，是否如官方所說達到恆定60fps的性能體驗？今天我們就以android為例從幾個不同的維度來實際測試一下！
安裝包對比
我們分別用 flutter 和 android 原生來編寫一個ui效果一模一樣的 apk，然後打出 release 版本的安裝包，為了保證測試結果的可靠性，我們不引入任何第三方庫，只用框架提供的控件做一些簡單ui，這裡附上demo源碼：flutter demo，android demo。好了，我們打出各自的release版本apk，然後使用AndroidStudio自帶的APK Analyzer進行分析，如下圖：
android原生apk
flutter apk
- apk 大小
可以明確的看出來，原生的安裝包要比 flutter 安裝包小約 6M 左右。 - classes.dex 大小
看 dex 大小你會不會很奇怪，原生的 classes.dex 竟然比 flutter 版的dex大六百多KB，這是因為原生的 dex 裡引入了 support 庫和各種基礎控件(ImageView TextView等等)，而 flutter 的 dex 裡面沒有support庫，也沒有原生控件，實際上 flutter 實現了一套自己的控件，包括 Material Design 和 Cupertino（iOS風格的widget）。 - res 對比
可以看到原生的資源文件要比 flutter 大約200多k，而我們項目中沒有編寫任何資源文件，所以這些資源文件大多是 support 包和 sdk 自帶的。 - lib 庫
大家可能會發現，我們的 flutter 版 app 多出了一個 lib 庫，打開裡邊是一個 libflutter.so，因為 Flutter 引擎是用 C、C++ 來編寫的，在 android 上會使用 ndk 編譯，在 iOS 上使用 LLVM 編譯，而我們自己寫的 dart 代碼會通過 AOT 編譯成各個平臺的本地代碼。
通過對比我們瞭解到，flutter 版的 apk 大小會比 android 原生的多出約 6M 左右，其中核心引擎大約 3.2MB，框架+應用程序代碼大約是 1.25MB，必需的 Java 代碼 .dex 將近 60k，而 assets 文件裡還約有 2.1MB 的 ICU 數據等，單純從安裝包上來說，原生是要優於 flutter 的。
運行性能測試
為了測試覆蓋更加充分，我們分別在 debug 和 release 模式上進行性能測試。而據官方介紹 flutter 的 debug 模式在性能上是要略於 release 版的，所以他們提供了 profile 模式供我們測試，profile 模式編譯和啟動 Flutter 應用程序幾乎與 release 模式完全相同。
我們先看 android 原生的 debug 和 flutter 的 proflle 模式性能對比,這裡我們用 Android Profiler 進行性能指標檢測，demo 只有一個界面，用 ListView 展示 10000 條數據。下面看圖：
android原生debug性能檢測圖
flutter profile性能檢測圖
- CPU資源佔用
首先，我們看 CPU 的佔用，在啟動的時候，android 原生對 cpu 的佔用峰值在 26.8%，而且幾乎是比較平穩的變化，而 flutter 對 cpu 的佔用峰值達到了 35.5%，是一種很陡峭的形態，然後在大約十六七秒的時候，分別滑動了 listview， android 原生對 cpu 資源的佔用峰值約 23%，而flutter約 22.5%。從圖中也可以看得出，flutter 對 cpu 資源的佔用是突然之間佔用很高，而 android 則相對平穩一些。 - 內存佔用
內存佔用表現上兩者都很相似，android 原生在啟動時佔用內存最高達到 58.1MB，而 flutter 則為 72MB，在滑動
listview 的時候，兩者表現也很一致，都沒有突然出現很高的內存佔用。達到穩定狀態後，android 原生內存佔用穩定在35MB，而 flutter 為 52.5MB。
debug 和profile 模式的性能測試如果你還不放心的話，那麼下面我分別打包出用 flutter 和 android 原生構建出的release apk，然後將手機開啟ROOT權限，以便可以用 Android Profiler 檢測到這兩個版本的進程，進行性能測試。下面看圖：
android原生性能檢測圖
flutter 性能檢測圖
我在打開 app 並鎖定當前進程後，分別在大約第 10 秒的時候，用手指輕輕滑動了 ListView，下面我們分析下兩種方式的資源佔用情況。
- CPU資源佔用
首先，我們看 CPU 的佔用，正常情況下，兩者都沒有佔用多少 CPU 資源，當我滑動 listview 的時候，原生的大約會佔用最高 7.7% 的 CPU 資源，而 flutter 版的則佔用高一些，峰值大概在 18.8%。 - 內存佔用
原生的app內存佔用維持在 12M 左右，而 flutter 版的則維持在 21M 左右，原生應用比 flutter 大約低了 9M 的內存佔用。
從上邊兩種模式的性能檢測結果分析我們可以總結出，flutter 應用在 CPU 和內存的資源佔用上會比原生方式多一些，所以單純的從性能上來說，android 原生是肯定要優於 flutter 的，但是從用戶體驗上來說，兩者的滑動同樣順暢無比，幾乎感覺不到差別。
應用啟動對比
啟動是我們衡量一個應用程序性能的重要指標，下面我先通過一個 gif 來演示下 android 版和 flutter 版啟動 app 的體驗：
看得出，android 版和 flutter 版從啟動體驗上來說幾乎不相上下。這裡我大膽做一個猜測，flutter app的啟動機制和原生還是一模一樣，所以調用啟動 Application 也是創建 ActivityThread 然後最終執行 Application 的 onCreate 方法，所以從啟動上來說相差無幾。下面我貼出 android 原生和 flutter 版的啟動trance文件，
android原生trance文件
flutter trance文件
trance 文件幾乎一模一樣，我一度都懷疑是自己弄錯了，然後又仔細確認了一下沒出錯才放心，可以得出結論，flutter 版的啟動流程跟原生是一模一樣的。
flutter 60幀/秒的刷新率測試
Flutter 官方指出其旨在提供 60 幀/秒的刷新率，60 fps 意味著大約平均每 16 ms 渲染一幀。我們知道，當 UI 不能平滑的渲染時就會出現掉幀。舉個例子，假如有一幀執行的東西太多，花費了 160 ms 的時間去渲染，這段期間就會產生丟幀現象，從而就會看到動畫出現了明顯的抖動。flutter release 版本是沒法去測試渲染指數的，這裡我們還是以 profile 模式運行，然後在用官方給我們提供的 Flutter Inspector 工具去展示 fps 變化。下面看 Gif 圖：
我的手機是小米Note 2，高通驍龍821處理器 4G 內存，性能大概屬於 Anroid 陣營中上等。我打開 app 後先是平穩的滑動 listview，然後又快速的滑動，由圖可看出，刷新率起初恆定在 60fps，當我快速滑動的時候，刷新率大約保持在58~59 之間，所以 flutter 官方所說 fps 恆定在 60fps 還是可信的。
總結
通過以上的分析，我們可以很明確的得出結論，android 原生在內存、CPU 資源佔用方面要低於 flutter，並且安裝包的體積也要小於 flutter，所以，不考慮其他因素，單純從性能角度來說，android 原生肯定是要優於 flutter 的。但 flutter 也有它的優點，比如跨平臺的開發、毫秒級的熱重載等等，另外跨端開發也逐漸的流行起來，所以，我們在學好android原生的基礎上，對跨端開發也要抱有積極的心態。
參考
flutter中文網：https://flutterchina.club
flutter官網：https://flutter.io
我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！
如果你也想學習前端，那麼幫忙轉發一下然後再關注小編後私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）
閱讀更多 前端明澈 的文章
