鸿蒙 Flutter 性能调优之性能分析定界

鸿蒙 Flutter 性能调优之性能分析定界

flutter 鸿蒙化的工程，也可以使用 devtools 对 Dart 代码进行调试.

前置条件

• OpenHarmony Next 系统

• 前台运行 Flutter 页面

• 分析工具DevEco Studio ProfilerSmartPerf
  

Flutter 线程介绍

Flutter 使用多个线程来完成其必要的工作，图层中仅展示了其中两个线程。你写的所有 Dart 代码都在 UI 线程上运行。尽管你没有直接访问其他线程的权限，但是你对 UI 线程的操作会对其他线程产生性能影响。

• 平台线程

• 平台的主线，插件代码在这里运行

• UI 线程

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

• Raster 线程

• 光栅化线程，又称 GPU 线程。raster 线程拿到 layer tree，并将它交给 GPU（图形处理单元）。你无法直接与 GPU 线程或其数据通信，但如果该线程变慢，一定是开发者 Dart 代码中的某处导致的。图形库 Skia 在该线程运行，并在性能图层的最顶栏显示该线程。请注意，raster 线程为 GPU 进行栅格化，而线程本身则是在 CPU 上运行的。

• I/O 线程

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

• RenderService 线程

• RS 进程的主线程，由 Flutter 渲染帧完成后，RS 线程进行合成并送显.Texture 模式下，Flutter 渲染后的 buffer 与应用的主线程合成后，统一送显，受应用主线程的影响；Surface 模式下，Flutter 渲染帧单独送显，不受应用主线程影响。

问题定界

在 DevEco Studio 中点击下方的 Profiler 标签页，打开性能调优工具，抓取应用的 trace 后，收藏应用进程的<x>.ui <x>.raster 和 RenderService 的主线

上图的 RenderService 缺失帧，是因为 UI 线程单帧耗时较长，超过一帧的时间（120 帧率下，一帧是 8.33 毫秒）。

一帧渲染流程中，<x>.ui 和 <x>.raster 加起来的的总时长超过一帧时间，则性能问题能定界是 Flutter 问题。问题的定位，需要进一步的性能分析。