flutter 性能分析图表的查看

1. Flutter 的线程

即主线程，plugin 代码运行在此线程。具体请参阅 Android 的 MainThread 以及 iOS 的 UIKit 文档。

UI 线程在 Dart VM 中执行 Dart 代码。当应用创建和展示场景的时候，UI 线程首先建立一个图层树（layer tree），一个包含设备无关的渲染命令的轻量对象，并将图层树发送到 GPU 线程来渲染到设备上。不要阻塞这个线程！在性能图层的最低栏展示该线程。

raster 线程拿到 layer tree，并将它交给 GPU（图形处理单元）。图形库 Skia 在该线程运行，并在性能图层的最顶栏显示该线程。

执行昂贵的操作（常见的有 I/O）以避免阻塞 UI 或者 raster 线程。这个线程将不会显示在 performance overlay 上。

打开 inspector 并单击 Performance Overlay 按钮即可显示性能图层。

命令行使用 P 参数切换性能图层。

如果性能图层的 UI 图表显示红色，就要从分析 Dart VM 开始着手了，即使 GPU 图表同样显示红色。

打开 stuidio 的性能工具窗口。

1）上方图表用于显示每帧耗时与每秒帧数：（应在 profile 模式下使用）

横轴表示当前帧，纵轴表示用时毫秒数。其中，每一帧都应该在 1/60 秒（大约 16 ms [1000/60=16.666]）内创建并显示。如果有一帧超时（任意图像）而无法显示，就导致了卡顿，图表之一就会展示出来一个红色竖条。

如果是在 UI 图表出现了红色竖条，则表明 Dart 代码消耗了大量资源。而如果红色竖条是在 GPU 图表出现的，意味着场景太复杂导致无法快速渲染。当两张图表都是红色时，就要开始对 UI 线程 (Dart VM) 进行诊断了。

2）下方图表用于查看 widget 的 rebuild 信息（仅 debug 模式下有用）：

黄色的表示重载次数过多，灰色转圈的表示已重载，灰色不转圈的表示未重载。

参考文章

posted on 2022-11-17 16:48 Lemo_wd 阅读(371) 评论(0) 编辑收藏举报

刷新页面返回顶部