(转)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/这个网址，就会看到如下的界面：

image

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

部分功能的截图如下：

image

image

image

2.Flutter Inspector启动

Flutter Inspector是一个强大的工具，要想使用Flutter Inspector，就得先运行Flutter APP。

运行Flutter APP后:

1. 在Android Studio里

选择 View > Tool Windows > Flutter Inspector，就可以打开Flutter Inspector，可以看到有很多功能，如下图：

image

然后选择Open observatory。

2. 在VS Code里

通过 View > Command Palette 或者 cmd+p打开命令板，输入“Open observatory” 然后选择 Open observatory就行。

image

如果看不到，说明你没有运行Flutter APP，得以Start Debugging的方式运行。

作者：小德_Kurt
链接：https://juejin.im/post/5c4c7634e51d453be80171c9
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。