Flutter-Timeline | 姜康的技术博客

type

status

date

slug

summary

横轴表示每一帧，纵轴表示帧渲染时间。红色表示jank，每一个柱状条可以点击，展开之后可以看到该帧的详细信息。

需要注意的是：
profile模式不支持模拟器
profile模式下才可以看到Frame rendering 图
开启profile模式的命令是：
flutter run --profile

frame rendering 包含两个过程，UI和GPU执行时间：

UI线程在DartVM中执行dart代码。当你的app创建并在屏幕上显示图像时，UI线程会创建一个layer tree（一个包含了与设备无关的绘制命令的轻量级对象），然后将layer tree发送给GPU去渲染。

GPU线程在Flutter Engine中执行图形代码。该线程接收layer tree作为输入，然后发送给GPU进行图形渲染。应用开发者一般不能直接访问GPU线程和它的数据(但是如果GPU线程很慢，则多半是你写的Dart代码的问题)。

Skia就是运行在GPU线程上的。

GPU线程有时候也叫rasterizer thread（光栅化线程）

有时候layer tree很容易构建，但是在GPU线程上的渲染成本很高，正如前面所说，这个时候你应该检查一个自己的代码为什么导致GPU渲染代码变慢。

国内一般叫做卡顿（渲染时间超过16ms），在frame rendering图中会以红色来表示。

Timeline View有三种层级：

前文说的就是Frame Rendering图，下面说一下后面的两种图标。

如图所示，event是自上而下产生的。

UI和GPU是独立的事件流，但是它们公用同一个Timeline View。

同样地，每一个Event信息也都可以点击，这样就会展开更加详细的信息，也就是CPU Profile图。

有三种采样粒度：

高采样率会影响APP性能。

CPU profile图和Android Studio上的类似，一般也就是火焰图，调用图，自底向上调用图等，具体的看图方法可以看官方文档。