DevTools 必知必会系列 —— Performance view

本篇文章翻译自官方的 👉Using the Performance view，这篇文章是 DevTools 系列的第三篇文章，主要介绍 Performance 工具怎么用。

往期精彩：

以下是正文

---

Performance 是什么？

Performance 视图提供了 Flutter 页面性能、时间有关的数据信息，主要包含了三个部分：

• Flutter 帧表

• 时间线事件表

• CPU 分析器

注意:  使用 profile 模式来分析应用的性能。 帧渲染的时候在 release 模式下，采集不到，所以一般使用 profile 模式。

Performance 视图也支持导入导出数据，后面会介绍。

Flutter 帧表

这个表格包含了 Flutter 应用的帧信息。每一个小条条代表了 Flutter 的一帧。小条条是有颜色的，不同的颜色代表了一帧上不同的工作：UI 线程、光栅 thread。

选中一个小条条，表格的底部会展示出和该帧相关的时间线事件。事件用蓝色括号括出来。

UI

UI 线程就是执行 Dart 虚拟机中的 Dart 代码：开发者写的代码和 framework 的代码。我们 App 创建并展示了一个 scene，UI 线程创建 layer 树，layer 树中携带着平台无关的绘制信息，然后将 layer 树交给 raster 线程渲染到设备上。不要阻塞 UI 线程。

Raster

Raster 线程 在 Engine 中执行图形化的过程。线程拿到 layer 树之后，把 layer 树交给 GPU 渲染。开发者不能够直接访问 Raster 线程以及线程的数据，但是如果这个线程比较满的话，开发的 Dart 代码可能做的事情太多了。Skia 就是运行在这个线程上。

有时 layer 树构造的 scene 很容易，但是 Raster 线程运行起来会很重。这种情形下，开发者需要找到导致 Raster 线程慢的地方。对 GPU 来说，指定特定类型的工作可能比较费劲。变慢的原因可能是多次调用 saveLayer()：交互多个透明对象、裁剪、阴影等。

更多的信息可以看 👉Identifying problems in the GPU graph。

Jank

Jank 的帧会用小红条条来表示。如果一帧的完成超过了 ~16 ms，那么这一帧就是 Jank 的。为了达到 60 FPS，每一帧必须要在 ~16 ms 以内。UI jank 或者 掉帧就会达不到这个目标。

更多的信息可以看 👉Identifying problems in the GPU graph。

时间线事件表

时间线事件表展示了所有捕获的事件。framework 在 build、绘制、HTTP traffic 都会发送事件。这些事件会展示在 Timeline 上，开发者也可以发送自己的事件通过 dart:developer Timeline and TimelineTask APIs.

帧表支持缩放和平移：

• 缩放，鼠标滚轮或者触摸板缩放

• 水平移动，点击并拖拽表

• 垂直移动，点击拖拽或者 alt + scroll

• WASD键盘 也可以控制缩放和移动

开发者可以点击事件看到更多的 CPU 信息

CPU 分析器

点击 Record 按钮就开始记录 CPU 分析，再次点击就会停止分析。CPU 的数据就从 VM 展示到了分析窗口。

Profile 粒度

VM 收集 CPU 样本的率默认是 1 sample / 250 μs。分析窗口默认选中的粒度是 “Profile granularity: medium”。这个率也支持修改，在页面的顶部可以看到修改的地方。岩本率是 low -1 / 1000 μs，medium - 1 / 250 μs，high - 1 / 50 μs。知道每个场景的用途很重要。

高粒度 是更高的样本采集率, 因此，会有更多的样本。因为高样本采集率会让 VM 频繁的终端采集，所以这也可能会影响 APP 的性能，这也可能会导致 VM 样本缓冲会溢出。VM 已经做好了样本空间的限制。在高样本采集率的情况下，会很快就占满空间并且很快溢出。这意味着可能会丢失最开始的记录。

低粒度 是更低的样本采集率, 因此样本会比较少。所以对 APP 的性能性能影响比较小。缓冲区的情况是和上面相反的。

帧表

这个 tab 展示了 CPU 样本的记录。是自顶向下的调用栈追踪，上面调用下面。栈帧的宽度表示花费的 CPU 时间。越宽的栈帧我们越需要关注，越需要优化。

调用树

调用树展示了方法的调用追踪，表格是自顶向下，表示方法能够展开的显示它的调用者。

• Total time

  本方法执行以及子方法的时长

• Self time

  本方法执行的时长

• Method

  被调用方法的名称

• Source

  方法调用点的源码文件

Bottom up

Bottom up 窗口展示了方法调用追踪，但是仅仅显示 CPU 分析的概要。这意味着每个方法是调用栈的最后一个方法，从这个方法可以看到调用链。方法可以展开显示调用者

• Total time

  本方法执行以及子方法的时长

• Self time

  本方法的执行时长

• Method

  被调用方法的名称

• Source

  方法调用点的源码文件

  

  导入导出

  DevTools 支持导入导出快照文件。点击 export 按钮会下载当前的性能数据。导入的话可以直接拖拽。 DevTools 仅仅支持导入从 DevTools 导出的文件