文章目錄
- 1 profile / release 模式
- 2 監測FPS幀率
-
- 2.1 在Android Studio 和 IntelliJ IDEA中
- 2.2 代碼中
- 2.3 打開Flutter開發者工具監控
-
- 2.3.1 安裝DevTools
- 3 UI幀率 和 GPU幀率
App 流暢性的關鍵名額有 UI幀率，GPU幀率，我們期望它能達到 60fps，也就是16ms每幀。
1 profile / release 模式
那麼如何擷取到呢？
前面文章介紹了Flutter的三種運作模式，要擷取FPS最好在profile / release 模式。
說明：
因為debug模式會有一些額外的檢查工作，比如assert()等
為了加速開發效率，debug模式是以 JIT（Just in time）模式編譯 dart 代碼的，而profile和release是提前編譯為機器碼 AOT（Ahead Of Time），是以 debug 會慢很多
是以為了擷取最接近生産環境的資料，我們應該選擇一台盡可能低端的真機，并且以 profile 模式或者 release 模式下運作app。
2 監測FPS幀率
Flutter提供了監測幀率工具。那麼如何開啟呢？
2.1 在Android Studio 和 IntelliJ IDEA中
選中 View > Tool Windows > Flutter Inspector。
或者使用快捷方式，點選視窗右側的Flutter Inspector。
然後點選上面圖中的箭頭所指的按鈕。就會在手機或模拟器中打開了。如下圖所示。
2.2 代碼中
打開 在MaterialApp 或者 WidgetsApp的構造函數中設定showPerformanceOverlay屬性為 true。同樣可以在手機和模拟器中看的幀率檢測。代碼如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
showPerformanceOverlay: true, // 開啟FPS監控
title: 'My Awesome App',
home: MyHomePage(title: 'My Awesome App'),
);
}
}
2.3 打開Flutter開發者工具監控
使用Flutter開發跨平台應用時，經常需要用到一個開發者工具，即Dart DevTools，Dart DevTools是一套用于Dart和Flutter應用開發的性能和調試工具，可以用它來檢測和分析應用的性能，以及用它來調試應用日志和進行記憶體分析等。
目前，Dart DevTools支援的功能有如下一些：
- 檢查和分析應用程式的UI布局和狀态。
- 診斷應用的UI 性能問題。
- 檢測和分析應用程式的CPU使用情況。
- 分析應用程式的網絡使用情況。
- Flutter或Dart應用程式的源代碼級調試。
- 調試Flutter或Dart應用程式的記憶體使用情況和分析記憶體問題。
- 檢視運作的Flutter或Dart應用程式的一般日志和診斷資訊。
2.3.1 安裝DevTools
使用DevTools之前需要先安裝DevTools插件，如果還沒有安裝，可以先安裝它。
1 Android Studio
預設情況下，隻要安裝了Flutter開發環境，基本就已經安裝了DevTools工具，安裝之後運作項目會在DevTools工具欄看到如下圖所示的工具集。
如下圖箭頭所示。
點選圖示，就在浏覽器中打開了DevTools界面。在TimeLine中就可以看到正在運作的應用的FPS了。如下圖所示。
3 UI幀率 和 GPU幀率
在上面打開的圖表上觀察是否出現紅色線條。綠色代表目前幀，當頁面有變動，圖表會不斷繪制。
蒙版上有2個圖表，每個圖表上有三橫格，每個橫格代表16ms。如果大多數幀都在第一格，說明達到了期望的幀率。
圖表分别展現了 UI幀率 和 GPU幀率。
如果出現了紅色，說明對應的線程有太多work要做。