Flutter性能監控工具（1）--- Observatory簡介

0x00 前言

Flutter的宣傳說，使用Flutter能夠達到60FPS，可是這並不意味，無論你怎麼寫，都能達到60FPS，若是有耗時的操做，可能會阻塞UI的渲染，若是內存使用過多，也有可能會OOM，因此性能的好壞，是保證Flutter可否達到60FPS的關鍵，在對Flutter進行性能優化以前，咱們先看下如何來監測Flutter的性能。

0x01 Flutter的三種構建模式(build modes)

Flutter有三種構建模式，適用於不一樣的場景，想要對性能監控，都跑在Profile模式下:

1.Debug

顧名思義，就是調試模式，在調試模式下：

1. Flutter的斷言（Assertions）功能是開的
2. Flutter的Observatory是開的，Observatory是用於分析和調試Dart代碼的工具，用於Dart的debugger
3. 擴展的服務功能（Service extensions）是開啓的，如第二點的Observatory的服務還有性能的服務等。
4. JIT編譯模式，可使用Hot Reload，爲了快速開發

能夠看到，在Debug模式下，爲了debug和快速開發，犧牲了性能，因此Debug模式都是用在開發階段。 並且模擬器只能運行Debug模式。

用命令行:

$flutter run
複製代碼

2.Release

顧名思義，就是要發佈了，在Release模式下，要追求最高的性能和最小的安裝包，因此會：

1. 斷言（Assertions）功能關閉
2. 沒有Debugging的信息
3. Debugger的功能關閉
4. AOT編譯，爲了快速啓動，快速執行和更小的包裝包大小。
5. 擴展的服務功能（Service extensions）關閉

因此，Release模式是APP要發佈的時候才用。

Release模式只能跑在真機上。

用命令行:

$flutter run --release
複製代碼

或者

$flutter build
複製代碼

3.Profile

Profile是專門監控性能的模式，在Debug模式下，不能實際反應應用的性能，而在Release模式下，卻沒有監控的功能，因此就誕生了Profile模式，Profile模式和Release模式更接近，Profile和Release都採用的AOT編譯，因此都不能用Hot Reload，可是Profile相對於Release，多了以下的功能：

1. 一些擴展的服務功能（Service extensions）是打開的，例如監控性能的浮層等。
2. Tracing是打開的，Observatory也能夠鏈接到進程

Profile模式只能跑在真機上。

用命令行:

$flutter run --profile
複製代碼

0x02 使用Observatory來監控性能

Observatory是用於分析和調試Dart代碼的工具，由於Flutter自帶Dart VM，因此也能夠用Observatory。

1. 命令行啓動 Observatory

Debug下啓用Observatory：

$flutter run
複製代碼

Profile下啓用Observatory：

$flutter run --profile
複製代碼

運行完命令後，會看到以下的信息：

$ flutter run --profile
Initializing gradle...                                       0.8s
Resolving dependencies...                                    6.6s
Launching lib/main.dart on ALP AL00 in profile mode...
Gradle task 'assembleProfile'...
Gradle task 'assembleProfile'... Done                       21.2s
Built build/app/outputs/apk/profile/app-profile.apk (66.5MB).
Installing build/app/outputs/apk/app.apk...                  5.4s
D/mali_winsys(18612): EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000

An Observatory debugger and profiler on ALP AL00 is available at http://127.0.0.1:57535/
For a more detailed help message, press "h". To quit, press "q".
複製代碼

這一句:

available at http://127.0.0.1:57535/
複製代碼

打開http://127.0.0.1:57535/這個網址，就會看到以下的界面：

Observatory支持以下的功能：

1. Allocation Profile
2. Code Coverage
3. CPU Profile
4. Debugger
5. Evaluating Expressions
6. Heap Map
7. Isolate
8. Metrics
9. User and VM Tags

部分功能的截圖以下：

2.Flutter Inspector啓動

Flutter Inspector是一個強大的工具，要想使用Flutter Inspector，就得先運行Flutter APP。

運行Flutter APP後:

1. 在Android Studio裏

選擇 View > Tool Windows > Flutter Inspector，就能夠打開Flutter Inspector，能夠看到有不少功能，以下圖：

而後選擇Open observatory。

2. 在VS Code裏

經過 View > Command Palette 或者 cmd+p打開命令板，輸入「Open observatory」 而後選擇 Open observatory就行。

若是看不到，說明你沒有運行Flutter APP，得以Start Debugging的方式運行。

0x03 Observatory使用

查看這篇文章：Flutter性能監控工具（3）--- Observatory使用