摘要：Flutter 的 UI 设计为每秒渲染 60 帧（fps），或者在支持 120Hz 更新的设备上为 120 帧。每次渲染称为一帧。这意味着，大约每 16ms，UI 就会更新以反映动画或 UI 的其他更改。渲染时间超过 16ms 的帧会导致显示设备上的卡顿（抖

Flutter 的 UI 设计为每秒渲染 60 帧（fps），或者在支持 120Hz 更新的设备上为 120 帧。每次渲染称为一帧。这意味着，大约每 16ms，UI 就会更新以反映动画或 UI 的其他更改。渲染时间超过 16ms 的帧会导致显示设备上的卡顿（抖动）。

Flutter 帧图表

此图表包含了应用的帧信息。图表中每组条形图代表每一帧。这些条形图以颜色区分渲染帧时进行的不同工作： UI 线程和光栅线程（以前称为 GPU 线程）。

此图表在时间线上显示应用的帧信息。图表中每组条形图代表每一帧。从图表选中一帧，就会更新下面 帧分析 标签页或 时间线事件 标签页中显示的数据。

比如我点击其中的一帧，图表下面会展示这一帧的 UI phases 与 Raster phase 时间。

UI 阶段

UI 线程执行 Dart VM 中的 Dart 代码。它包括你的应用程序和 Flutter 框架的所有代码。当你创建或打开一个页面， UI 线程会创建一个图层树和一个轻量级的与设备无关的绘制指令集，并把图层树交给设备的光栅线程进行渲染。

光栅线程 (Raster)

光栅线程执行 Flutter 引擎中图形相关的代码。这个线程通过与 GPU (图形处理单元) 通信，获取图形树并显示它。

开发者不能直接访问光栅线程或它的数据，但如果这个线程较慢，那它肯定是由你的 Dart 代码引起的。

图形化库 Skia 运行在这个线程上。 Impeller 也将运行在这个线程上。

有时候一个页面的图形层树比较容易构建但光栅线程的渲染却比较昂贵。在这种情形下，你需要找出导致渲染变慢的代码。

为 GPU 设定特定多种类型的 workload 是相当困难的。在一些特定的情形下，多个对象的透明度重叠、剪切或阴影，有可能会导致不必要的 saveLayer 的调用。

在应用程序运行过程中绘制新的帧时，会更新 Flutter 帧图表。点击图表右侧的暂停按钮就可以暂停图表的更新，点击图表上方的 Flutter frames 按钮，可以将此图表折叠起来，为下面的数据提供更多的观察空间。

帧渲染时间在调试模式下不代表发布模式的性能，可以考虑使用 profile 模式。

来源：早起的年轻人