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使用