先前開發時安裝在模擬器或實體手機的模式都是使用Debug模式，在Debug模式會開啟許多功能便於開發人員進行除錯(例如assert、debugging資訊等等)，Hot Reload功能也只有在這個模式才有支援。
另外編譯程式碼的方式也對效能有所影響，Debug Mode採用JIT(Just in Time)的方式編譯，也就是邊執行邊編譯；而Profile Mode和Release Mode則採用AOT(ahead of time)，AOT會事先編譯使得執行時的效能會提升許多。
Profile Mode和Release Mode的差異並不大，主要的不同是Profile Mode會額外開啟一些擴充服務，例如今天要提的效能檢測。
Release Mode會優化整個App的效能，例如刪除Debug用的資訊以及採用AOT方式編譯，並會盡可能的縮小apk的大小。
順帶一提，Profile Mode和Release Mode只能運行在實體手機，不支援模擬器的喔。
Flutter號稱能夠提供60fps的效能，所以今天的重點就是介紹如何使用Profile Mode來查看你寫的App效能有沒有符合標準呢。
執行Profile Mode有幾種方法：
如果跟我一樣是用Android Studio開發，你可以在Run裡面找到執行Profile Mode的選項
或是在Command Line輸入flutter run --profile
安裝好App後，在右下角開啟「Flutter Performance」會看到紅紅白白的柱狀圖。接著勾選「Show Performance Overlay」，在螢幕上方就會顯示出CPU和GPU的效能狀態。
Android Studio裡和手機螢幕上呈現的資訊是相同的，都是在表達繪製每個frame需要花多少時間，知道每個frame的耗費時間便能算出fps是多少。
可以看到圖上依稀有一條16ms的虛線，只要frame的繪製時間低於這條線(白色柱狀)表示有達到60fps的流暢度(16x60=960ms)。
這裡分成上下兩區塊，上面的是GPU下面是UI(CPU)，第一條橫軸黑線表示16ms(低於就代表有60fps)。綠線則是當前的frame，如果你持續操作綠線就會不斷的移動。
在gif中可以看到綠色線有時會變成紅色線，紅色表示在那個frame進行的操作對GPU或CPU的負擔比較大，之後便能針對那個功能的程式碼做確認或改善。
這次使用兩台手機進行效能的比較，測試FlutTube在新舊手機上的運作情況如何。
| 手機型號 | HTC U11 | HTC ONE E9 |
|---|---|---|
| 處理器 | Qualcomm 835 | MT6795M |
| 處理器時脈 | 2.45 GHz | 2GHz |
| 記憶體 | 6G | 2G |
| Android版本 | 9 | 5.0.2 |
| 上市日期 | 2017/05 | 2015/08 |
| 手機型號 | 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的運作流暢度我覺得還行，近期的手機效能都是足以負擔的。當然還是有能夠精進的地方，我覺得之後能進行改善的部分有兩點
今天介紹了Flutter的三個編譯模式(Debug、Profile以及Release)的差異，並用Profile Mode對FlutTube進行測試，以主流手機來說Flutter的效能基本上都能達到它所宣稱的60fps，但如果真的要上架到play store還是要考慮到目標使用者的裝置性能是否足以負荷你的App喔。
明天是鐵人賽的最後一天(太感動了Q_Q)，就把FlutTube輸出Release APK作為完美Ending吧。
iThome鐵人賽
看影片追技術