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/这个网址，就会看到如下的界面：
<figcaption></figcaption>
Observatory支持如下的功能：
- Allocation Profile
- Code Coverage
- CPU Profile
- Debugger
- Evaluating Expressions
- Heap Map
- Isolate
- Metrics
- User and VM Tags
部分功能的截图如下：
<figcaption></figcaption>
<figcaption></figcaption>
<figcaption></figcaption>
2.Flutter Inspector启动
Flutter Inspector是一个强大的工具，要想使用Flutter Inspector，就得先运行Flutter APP。
运行Flutter APP后:
- 在Android Studio里
选择 View > Tool Windows > Flutter Inspector，就可以打开Flutter Inspector，可以看到有很多功能，如下图：
<figcaption></figcaption>
然后选择Open observatory。
- 在VS Code里
通过 View > Command Palette 或者 cmd+p打开命令板，输入“Open observatory” 然后选择 Open observatory就行。
<figcaption></figcaption>
如果看不到，说明你没有运行Flutter APP，得以Start Debugging的方式运行。
作者：小德_Kurt
链接：https://juejin.im/post/5c4c7634e51d453be80171c9
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
