0x00 前言
Flutter的宣傳說，使用Flutter可以達到60FPS，但是這並不意味，不管你怎麼寫，都能達到60FPS，如果有耗時的操作，可能會阻塞UI的渲染，如果記憶體使用過多，也有可能會OOM，所以效能的好壞，是保證Flutter能否達到60FPS的關鍵，在對Flutter進行效能優化之前，我們先看下如何來監測Flutter的效能。
0x01 Flutter的三種構建模式(build modes)
Flutter有三種構建模式，適用於不同的場景，想要對效能監控，都跑在Profile模式下:
1.Debug
顧名思義，就是除錯模式，在除錯模式下：
- Flutter的斷言（Assertions）功能是開的
- Flutter的Observatory是開的，Observatory是用於分析和除錯Dart程式碼的工具，用於Dart的debugger
- 擴充套件的服務功能（Service extensions）是開啟的，如第二點的Observatory的服務還有效能的服務等。
- JIT編譯模式，可以使用Hot Reload，為了快速開發
可以看到，在Debug模式下，為了debug和快速開發，犧牲了效能，所以Debug模式都是用在開發階段。 而且模擬器只能執行Debug模式。
用命令列:
$flutter run
複製程式碼2.Release
顧名思義，就是要釋出了，在Release模式下，要追求最高的效能和最小的安裝包，所以會：
- 斷言（Assertions）功能關閉
- 沒有Debugging的資訊
- Debugger的功能關閉
- AOT編譯，為了快速啟動，快速執行和更小的包裝包大小。
- 擴充套件的服務功能（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，多瞭如下的功能：
- 一些擴充套件的服務功能（Service extensions）是開啟的，例如監控效能的浮層等。
- 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支援如下的功能：
- Allocation Profile
- Code Coverage
- CPU Profile
- Debugger
- Evaluating Expressions
- Heap Map
- Isolate
- Metrics
- User and VM Tags
部分功能的截圖如下：
2.Flutter Inspector啟動
Flutter Inspector是一個強大的工具，要想使用Flutter Inspector，就得先執行Flutter APP。
執行Flutter APP後:
- 在Android Studio裡
選擇 View > Tool Windows > Flutter Inspector，就可以開啟Flutter Inspector，可以看到有很多功能，如下圖：
然後選擇Open observatory。
- 在VS Code裡
通過 View > Command Palette 或者 cmd+p開啟命令板，輸入“Open observatory” 然後選擇 Open observatory就行。
如果看不到，說明你沒有執行Flutter APP，得以Start Debugging的方式執行。