Flutter和原生APP的性能對比

前言

自從今年google IO大會推出flutter跨平臺開發(fā)框架以來，flutter在各個技術(shù)論壇里被吵得如日中天。flutter團隊直言flutter可以幫助開發(fā)者輕松實現(xiàn)恒定60fps的性能體驗。
我們知道flutter跨平臺的原理是采用dart語言預(yù)編譯的方式直接編譯出各個平臺的原生代碼，而不需要類似RN用JavaScript橋接器執(zhí)行原生代碼。那么這樣做的性能究竟如何呢？是否能達到和原生一樣的流暢度，是否如官方所說達到恒定60fps的性能體驗？今天我們就以android為例從幾個不同的維度來實際測試一下！

安裝包對比

我們分別用 flutter 和 android 原生來編寫一個ui效果一模一樣的 apk，然后打出 release 版本的安裝包，為了保證測試結(jié)果的可靠性，我們不引入任何第三方庫，只用框架提供的控件做一些簡單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 庫和各種基礎(chǔ)控件(ImageView TextView等等)，而 flutter 的 dex 里面沒有support庫，也沒有原生控件，實際上 flutter 實現(xiàn)了一套自己的控件，包括 Material Design 和 Cupertino(iOS風(fēng)格的widget)。
• res 對比
  可以看到原生的資源文件要比 flutter 大約200多k，而我們項目中沒有編寫任何資源文件，所以這些資源文件大多是 support 包和 sdk 自帶的。
• lib 庫
  大家可能會發(fā)現(xiàn)，我們的 flutter 版 app 多出了一個 lib 庫，打開里邊是一個 libflutter.so，因為 Flutter 引擎是用 C、C++ 來編寫的，在 android 上會使用 ndk 編譯，在 iOS 上使用 LLVM 編譯，而我們自己寫的 dart 代碼會通過 AOT 編譯成各個平臺的本地代碼。

通過對比我們了解到，flutter 版的 apk 大小會比 android 原生的多出約 6M 左右，其中核心引擎大約 3.2MB，框架+應(yīng)用程序代碼大約是 1.25MB，必需的 Java 代碼 .dex 將近 60k，而 assets 文件里還約有 2.1MB 的 ICU 數(shù)據(jù)等，單純從安裝包上來說，原生是要優(yōu)于 flutter 的。

運行性能測試

為了測試覆蓋更加充分，我們分別在 debug 和 release 模式上進行性能測試。而據(jù)官方介紹 flutter 的 debug 模式在性能上是要略于 release 版的，所以他們提供了 profile 模式供我們測試，profile 模式編譯和啟動 Flutter 應(yīng)用程序幾乎與 release 模式完全相同。
我們先看 android 原生的 debug 和 flutter 的 proflle 模式性能對比,這里我們用 Android Profiler 進行性能指標(biāo)檢測，demo 只有一個界面，用 ListView 展示 10000 條數(shù)據(jù)。下面看圖：

android原生debug性能檢測圖

flutter profile性能檢測圖

• CPU資源占用
  首先，我們看 CPU 的占用，在啟動的時候，android 原生對 cpu 的占用峰值在 26.8%，而且?guī)缀跏潜容^平穩(wěn)的變化，而 flutter 對 cpu 的占用峰值達到了 35.5%，是一種很陡峭的形態(tài)，然后在大約十六七秒的時候，分別滑動了 listview， android 原生對 cpu 資源的占用峰值約 23%，而flutter約 22.5%。從圖中也可以看得出，flutter 對 cpu 資源的占用是突然之間占用很高，而 android 則相對平穩(wěn)一些。
• 內(nèi)存占用
  內(nèi)存占用表現(xiàn)上兩者都很相似，android 原生在啟動時占用內(nèi)存最高達到 58.1MB，而 flutter 則為 72MB，在滑動
  listview 的時候，兩者表現(xiàn)也很一致，都沒有突然出現(xiàn)很高的內(nèi)存占用。達到穩(wěn)定狀態(tài)后，android 原生內(nèi)存占用穩(wěn)定在35MB，而 flutter 為 52.5MB。

debug 和profile 模式的性能測試如果你還不放心的話，那么下面我分別打包出用 flutter 和 android 原生構(gòu)建出的release apk，然后將手機開啟ROOT權(quán)限，以便可以用 Android Profiler 檢測到這兩個版本的進程，進行性能測試。下面看圖：

android原生性能檢測圖

flutter 性能檢測圖

我在打開 app 并鎖定當(dāng)前進程后，分別在大約第 10 秒的時候，用手指輕輕滑動了 ListView，下面我們分析下兩種方式的資源占用情況。

• CPU資源占用
  首先，我們看 CPU 的占用，正常情況下，兩者都沒有占用多少 CPU 資源，當(dāng)我滑動 listview 的時候，原生的大約會占用最高 7.7% 的 CPU 資源，而 flutter 版的則占用高一些，峰值大概在 18.8%。
• 內(nèi)存占用
  原生的app內(nèi)存占用維持在 12M 左右，而 flutter 版的則維持在 21M 左右，原生應(yīng)用比 flutter 大約低了 9M 的內(nèi)存占用。

從上邊兩種模式的性能檢測結(jié)果分析我們可以總結(jié)出，flutter 應(yīng)用在 CPU 和內(nèi)存的資源占用上會比原生方式多一些，所以單純的從性能上來說，android 原生是肯定要優(yōu)于 flutter 的，但是從用戶體驗上來說，兩者的滑動同樣順暢無比，幾乎感覺不到差別。

應(yīng)用啟動對比

啟動是我們衡量一個應(yīng)用程序性能的重要指標(biāo)，下面我先通過一個 gif 來演示下 android 版和 flutter 版啟動 app 的體驗：

看得出，android 版和 flutter 版從啟動體驗上來說幾乎不相上下。這里我大膽做一個猜測，flutter app的啟動機制和原生還是一模一樣，所以調(diào)用啟動 Application 也是創(chuàng)建 ActivityThread 然后最終執(zhí)行 Application 的 onCreate 方法，所以從啟動上來說相差無幾。下面我貼出 android 原生和 flutter 版的啟動trance文件，

android原生trance文件

flutter trance文件

trance 文件幾乎一模一樣，我一度都懷疑是自己弄錯了，然后又仔細確認了一下沒出錯才放心，可以得出結(jié)論，flutter 版的啟動流程跟原生是一模一樣的。

flutter 60幀/秒的刷新率測試

Flutter 官方指出其旨在提供 60 幀/秒的刷新率，60 fps 意味著大約平均每 16 ms 渲染一幀。我們知道，當(dāng) UI 不能平滑的渲染時就會出現(xiàn)掉幀。舉個例子，假如有一幀執(zhí)行的東西太多，花費了 160 ms 的時間去渲染，這段期間就會產(chǎn)生丟幀現(xiàn)象，從而就會看到動畫出現(xiàn)了明顯的抖動。flutter release 版本是沒法去測試渲染指數(shù)的，這里我們還是以 profile 模式運行，然后在用官方給我們提供的 Flutter Inspector 工具去展示 fps 變化。下面看 Gif 圖：

我的手機是小米Note 2，高通驍龍821處理器 4G 內(nèi)存，性能大概屬于 Anroid 陣營中上等。我打開 app 后先是平穩(wěn)的滑動 listview，然后又快速的滑動，由圖可看出，刷新率起初恒定在 60fps，當(dāng)我快速滑動的時候，刷新率大約保持在58~59 之間，所以 flutter 官方所說 fps 恒定在 60fps 還是可信的。

總結(jié)

通過以上的分析，我們可以很明確的得出結(jié)論，android 原生在內(nèi)存、CPU 資源占用方面要低于 flutter，并且安裝包的體積也要小于 flutter，所以，不考慮其他因素，單純從性能角度來說，android 原生肯定是要優(yōu)于 flutter 的。但 flutter 也有它的優(yōu)點，比如跨平臺的開發(fā)、毫秒級的熱重載等等，另外跨端開發(fā)也逐漸的流行起來，所以，我們在學(xué)好android原生的基礎(chǔ)上，對跨端開發(fā)也要抱有積極的心態(tài)。

參考

flutter中文網(wǎng)：https://flutterchina.club
flutter官網(wǎng)：https://flutter.io

---

喜歡小編的可以點個贊關(guān)注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準(zhǔn)備了新出的前端編程學(xué)習(xí)資料，免費分享給大家！

如果你也想學(xué)習(xí)前端，那么幫忙轉(zhuǎn)發(fā)一下然后再關(guān)注小編后私信【1】可以得到我整理的這些前端資料了(私信方法：點擊我頭像進我主頁有個上面有個私信按鈕)

總結(jié)

以上是生活随笔為你收集整理的flutter打包的app有多大_前端大势所趋---Flutter 这篇文章会让你行动起来的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。