Flutter-Timeline


Flutter有三种构建模式:

  • debug
  • release
  • profile

在profile模式下,我们可以看到frame rendering图:

Frame Rendering Chart

渲染图

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

需要注意的是:

  1. profile模式不支持模拟器

  2. profile模式下才可以看到Frame rendering 图

  3. 开启profile模式的命令是:

    flutter run --profile

frame rendering 包含两个过程,UI和GPU执行时间:

UI

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

GPU

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

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

GPU线程有时候也叫rasterizer thread(光栅化线程)

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

jank

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

Timeline View有三种层级:

  • Frame Rendering 图
  • Frame events 图
  • CPU分析图

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

Frame Events Chart

事件图

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

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

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

CPU Profile Chart

CPU

有三种采样粒度:

  • low : 1 sample / 50 μs
  • medium(默认):1 sample / 250 μs
  • high : 1 sample / 1000 μs

高采样率会影响APP性能。

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

参考文章

  1. https://flutter.dev/docs/development/tools/devtools/timeline

文章作者: 姜康
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 姜康 !
评论
 上一篇
初识SDL 初识SDL
SDL是什么Simple DirectMedia Layer 是一个跨平台的开发库,它提供了对音频,键盘,鼠标,游戏手柄的底层访问接口.以及通过OpenGL或者Direct3D控制图形硬件的接口. 目前支持以下平台: Windows
2020-05-08
本篇 
Flutter-Timeline Flutter-Timeline
Flutter有三种构建模式: debug release profile 在profile模式下,我们可以看到frame rendering图: Frame Rendering Chart 横轴表示每一帧,纵轴表示帧渲染时间。红色表示
2020-05-08
  目录