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

<figcaption></figcaption>

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

<figcaption></figcaption>

image

<figcaption></figcaption>

image

<figcaption></figcaption>

2.Flutter Inspector启动

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

运行Flutter APP后:

1. 在Android Studio里

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

image

<figcaption></figcaption>

然后选择Open observatory。

2. 在VS Code里

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

image

<figcaption></figcaption>

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

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