iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
Mobile Development

Flutter---Google推出的跨平台框架,Android、iOS一起搞定系列 第 29

【Flutter基礎概念與實作】 Day29–Profile Mode檢測App效能

今天要介紹的是Flutter的Profile Mode,在Profile Mode可以看到即時的CPU和GPU的效能狀況,有助於開發人員優化App。

Flutter的三種編譯模式

  • Debug Mode:

先前開發時安裝在模擬器或實體手機的模式都是使用Debug模式,在Debug模式會開啟許多功能便於開發人員進行除錯(例如assert、debugging資訊等等),Hot Reload功能也只有在這個模式才有支援。
另外編譯程式碼的方式也對效能有所影響,Debug Mode採用JIT(Just in Time)的方式編譯,也就是邊執行邊編譯;而Profile Mode和Release Mode則採用AOT(ahead of time),AOT會事先編譯使得執行時的效能會提升許多。

  • Profile Mode:

Profile Mode和Release Mode的差異並不大,主要的不同是Profile Mode會額外開啟一些擴充服務,例如今天要提的效能檢測。

  • Release Mode:

Release Mode會優化整個App的效能,例如刪除Debug用的資訊以及採用AOT方式編譯,並會盡可能的縮小apk的大小。

順帶一提,Profile Mode和Release Mode只能運行在實體手機,不支援模擬器的喔。

Profile Mode

Flutter號稱能夠提供60fps的效能,所以今天的重點就是介紹如何使用Profile Mode來查看你寫的App效能有沒有符合標準呢。

執行Profile Mode有幾種方法:

  1. 如果跟我一樣是用Android Studio開發,你可以在Run裡面找到執行Profile Mode的選項

  2. 或是在Command Line輸入flutter run --profile

安裝好App後,在右下角開啟「Flutter Performance」會看到紅紅白白的柱狀圖。接著勾選「Show Performance Overlay」,在螢幕上方就會顯示出CPU和GPU的效能狀態。


Android Studio裡和手機螢幕上呈現的資訊是相同的,都是在表達繪製每個frame需要花多少時間,知道每個frame的耗費時間便能算出fps是多少。

Flutter Performance

可以看到圖上依稀有一條16ms的虛線,只要frame的繪製時間低於這條線(白色柱狀)表示有達到60fps的流暢度(16x60=960ms)。

Performance Overlay

這裡分成上下兩區塊,上面的是GPU下面是UI(CPU),第一條橫軸黑線表示16ms(低於就代表有60fps)。綠線則是當前的frame,如果你持續操作綠線就會不斷的移動。

在gif中可以看到綠色線有時會變成紅色線,紅色表示在那個frame進行的操作對GPU或CPU的負擔比較大,之後便能針對那個功能的程式碼做確認或改善。

FlutTube的效能表現

這次使用兩台手機進行效能的比較,測試FlutTube在新舊手機上的運作情況如何。

手機型號 HTC U11 HTC ONE E9
處理器 Qualcomm 835 MT6795M
處理器時脈 2.45 GHz 2GHz
記憶體 6G 2G
Android版本 9 5.0.2
上市日期 2017/05 2015/08

各功能fps比較(平均fps)

手機型號 HTC U11 HTC ONE E9
開場動畫 28 fps 5 fps
登入頁面 60 fps 60 fps
主頁面 滑動頁面 60 fps 24 fps
主頁面 切換電影類別 60 fps 34 fps
電影細節頁面 60 fps 55 fps

開場動畫表現的最慘其實並不意外,畢竟要渲染整個頁面所要耗費的資源是很兇的,在E9手機開場動畫幾乎變成停格動畫,還沒反應過來就跳到登入頁面了。可見之後若要使用整版的flare動畫要考慮到使用者的裝置效能。

其餘的操作在U11上都是非常流暢的60fps。對於E9比較吃力的是滑動電影卡片的部分,這就和實作程式碼有很大的關聯,因為滑動的動畫是藉由偵測到Page被滑動就刷新一次介面的方式來形成的效果,滑動一張卡片可能就須刷新上百次,對於E9來說確實比較無法負荷。

總結來說,FlutTube的運作流暢度我覺得還行,近期的手機效能都是足以負擔的。當然還是有能夠精進的地方,我覺得之後能進行改善的部分有兩點

  1. 偵測使用者裝置效能是否能負荷播放開場動畫,若無法就用其他方式替代
  2. 優化實作翻動卡片的方式,例如讓setState只需更新局部頁面,減少渲染的負擔。

今日總結

今天介紹了Flutter的三個編譯模式(Debug、Profile以及Release)的差異,並用Profile Mode對FlutTube進行測試,以主流手機來說Flutter的效能基本上都能達到它所宣稱的60fps,但如果真的要上架到play store還是要考慮到目標使用者的裝置性能是否足以負荷你的App喔。

明天是鐵人賽的最後一天(太感動了Q_Q),就把FlutTube輸出Release APK作為完美Ending吧。


上一篇
【Flutter基礎概念與實作】 Day28–使用FCM發送通知給使用者
下一篇
【Flutter基礎概念與實作】 Day30–完賽啦~ 輸出Release APK吧
系列文
Flutter---Google推出的跨平台框架,Android、iOS一起搞定30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言