性能分析
Flutter的帧
Flutter的UI设计为每秒渲染60帧（fps），或者在支持120Hz更新的设备上为120帧。每次渲染称为一帧。
这意味着，大约每16ms（60帧），UI就会更新以反映动画或UI的其他更改。渲染时间超过16ms的帧会导致显示设备上的卡顿（抖动）。
Flutter帧图表
此图表包含了Flutter应用的帧信息。图表中每组条形图代表单个Flutter帧。
条形图以颜色编码来突出显示渲染Flutter帧时发生的不同工作部分：UI线程和光栅线程的工作。
此图表在时间线上显示Flutter帧计时信息。从图表中选择一帧会更新下面帧分析标签页或时间线事件标签页中显示的数据。
当应用中绘制新帧时，Flutter帧图表会更新。要暂停此图表的更新，请点击图表右侧的暂停按钮。可以通过点击图表上方的"Flutter frames"按钮来折叠此图表，为下面的数据提供更多查看空间。
代表每个Flutter帧的条形图对以颜色编码，突出显示渲染Flutter帧时发生的不同工作部分：
UI线程
UI线程在Dart VM中执行Dart代码。这包括来自你的应用程序以及Flutter框架的代码。当你的应用创建和显示场景时，UI线程创建一个图层树（一个包含与设备无关的绘制命令的轻量级对象），并将图层树发送到光栅线程以在设备上渲染。不要阻塞此线程。
光栅线程
光栅线程执行来自Flutter引擎的图形代码。此线程通过与GPU（图形处理单元）通信来获取图层树并显示它。你无法直接访问光栅线程或其数据，但如果此线程很慢，那是由你在Dart代码中所做的事情导致的。图形库Skia在此线程上运行。Impeller也使用此线程。
有时场景会导致图层树易于构建，但在光栅线程上渲染成本很高。在这种情况下，你需要找出代码中导致渲染代码变慢的原因。特定类型的工作负载对GPU来说更困难。它们可能涉及不必要的saveLayer()调用、多个对象的相交不透明度，以及在特定情况下的剪切或阴影。
卡顿（慢帧）
帧渲染图表用红色叠加层显示卡顿。如果帧完成时间超过约16ms（对于60 FPS设备），则该帧被认为是卡顿的。要实现60 FPS（每秒帧数）的帧渲染率，每帧必须在约16ms或更短时间内渲染。当错过此目标时，你可能会遇到UI卡顿或掉帧。
着色器编译
当着色器在Flutter应用中首次使用时会发生着色器编译。执行着色器编译的帧会以深红色标记。
有关如何减少着色器编译卡顿的更多信息，请查看《减少移动端着色器编译卡顿》文档。
帧分析标签页
从上面的Flutter帧图表中选择卡顿帧（慢速，红色显示）会在帧分析标签页中显示调试提示。这些提示帮助你诊断应用中的卡顿，并通知你任何我们检测到可能导致帧时间变慢的昂贵操作。
时间线事件标签页
时间线事件图表显示来自你的应用程序的所有事件跟踪。Flutter框架在构建帧、绘制场景以及跟踪其他活动（如HTTP请求计时和垃圾收集）时会发出时间线事件。这些事件显示在时间线中。你也可以使用dart:developer的Timeline和TimelineTask API发送自己的时间线事件。
要获得导航和使用跟踪查看器的帮助，请点击时间线事件标签栏右上角的?按钮。要使用来自应用程序的新事件刷新时间线，请点击刷新按钮（也在标签控件的右上角）。
高级调试工具
增强跟踪
要在时间线事件图表中查看更详细的跟踪，请使用增强跟踪下拉菜单中的选项。你可以重复执行要跟踪的行为以查看新的时间线事件，操作后可以在时间线中选择构建帧进行查看。
性能分析最佳实践
- 定期监控性能：在开发过程中定期使用性能视图检查应用性能
- 关注卡顿帧：重点分析红色标记的慢帧，找出性能瓶颈
- 优化UI线程：避免在UI线程上执行耗时操作
- 减少不必要的重建：使用Flutter Inspector查看widget重建情况
- 着色器预热：在应用启动时预编译常用着色器以减少运行时卡顿