再學不會 Flutter 你來打我!

https://mp.weixin.qq.com/s/4G6hWW6GxnmV_j6d2rVBpA

我很看好Flutter,也希望能帶着大家一起學習。但是我發現網上的Flutter文章系統性不夠,知識比較零散,所以我就想親自規劃一系列文章。

近期我公號陸續發了7篇Flutter文章,算上今天這篇共8篇。我自己寫了一篇,剩下7篇都是我贊助別人寫的,每篇200元,共花了1400元。我花錢不要緊,只是希望大家能把這8篇文章利用起來,提高自己,這樣這件事情的價值才能得以體現。

 

Flutter學習指南”

今天這篇文章的作者是:Xiasm,主要講述Flutter和原生APP的性能對比,下面是正文。

前言

自從今年google IO大會推出flutter跨平臺開發框架以來,flutter在各個技術論壇裏被吵得如日中天.flutter團隊直言flutter可以幫助開發者輕鬆實現恆定60fps的性能體驗。

我們知道flutter跨平臺的原理是採用飛鏢語言預編譯的方式直接編譯出各個平臺的原生代碼,而不需要類似RN用JavaScript的橋接器執行原生代碼,那麼這樣做的性能究竟如何呢?是否能達到和原生一樣的流暢度,是否如官方所說達到恆定的60fps的性能體驗?今天我們就以機器人爲例從幾個不同的維度來實際測試一下

安裝包對比

我們分別用flutter和android原生來編寫一個ui效果一模一樣的apk,然後打出釋放版本的安裝包,爲了保證測試結果的可靠性,我們不引入任何第三方庫,只用框架提供的控件做一些簡單ui ,這裏附上demo源碼:flutter demo,android demo。好了,我們打出各自的發佈版本apk,然後使用AndroidStudio自帶的APK Analyzer進行分析,如下圖:

 

  • apk大小
    可以明確的看出來,原生的安裝包要比flutter安裝包小約6M左右。

  • classes.dex大小
    看dex大小你會不會很奇怪,原生的classes.dex竟然比flutter版的dex大六百多KB,這是因爲原生的dex裏引入了支持庫和各種基礎控件(ImageView TextView等等),而flutter的dex裏面沒有支持庫,也沒有原生控件,實際上flutter實現了一套自己的控件,包括Material Design和Cupertino(iOS風格的小部件)。

  • res對比
    可以看到原生的資源文件要比flutter大約200多k,而我們項目中沒有編寫任何資源文件,所以這些資源文件大多是支包和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,而資產文件裏還約有2.1MB的ICU數據等,單純從安裝包上來說,原生是要優於flutter的。

運行性能測試

爲了測試覆蓋更加充分,我們分別在調試和釋放模式上進行性能測試。而據官方介紹flutter的調試模式在性能上是要略於發佈版的,所以他們提供了簡介模式供我們測試,profile模式編譯和啓動Flutter應用程序幾乎與釋放模式完全相同。

我們先看android原生的調試和flutter的proflle模式性能對比,這裏我們用Android Profiler進行性能指標檢測,演示只有一個界面,用ListView展示10000條數據。下面看圖:

  • CPU資源佔用
    首先,我們看CPU的佔用,在啓動的時候,android原生對cpu的佔用峯值在26.8%,而且幾乎是比較平穩的變化,而flutter對cpu的佔用峯值達到了35.5%,是一種很陡峭的形態,然後在大約十六七秒的時候,分別滑動了listview,android原生對cpu資源的佔用峯值約23%,而flutter約22.5%。從圖中也可以看得出,flutter對cpu資源的佔用是突然之間佔用很高,而android則相對平穩一些。

  • 內存佔用
    內存佔用表現上兩者都很相似,因爲在第一時間
    ,兩個表現也很一致內存佔用。達到穩定狀態後,因爲flutter爲52.5MB。

debug和profile模式的性能測試如果你還不放心的話,那麼下面我分別打包出用flutter和android原生構建出的發佈apk,然後將手機開啓ROOT權限,以便可以用Android Profiler檢測到這兩個版本的進程,進行性能測試下面看圖:

我在打開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的啓動機制和原生還是一模一樣,所以調用啓動應用也是創建ActivityThread然後最終執行應用程序的onCreate方法,所以從啓動上來說相差無幾。下面我貼出android原生和flutter版的啓動恍惚文件,

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

 

推薦閱讀
當Dagger2撞上ViewModel
我對程序員35歲這道坎的看法
如何和hr鬥智鬥勇

 

編程·思維·職場
歡迎掃碼關注

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章