使用性能视图
性能页面可以帮助您诊断应用程序中的性能问题和 UI 卡顿。此页面提供了应用程序中活动的时序和性能信息。它包含多个工具，可帮助您识别应用程序性能不佳的原因
- Flutter 帧图表（仅限 Flutter 应用程序）
- 帧分析选项卡（仅限 Flutter 应用程序）
- 光栅统计信息选项卡（仅限 Flutter 应用程序）
- 时间线事件跟踪查看器（所有原生 Dart 应用程序）
- 高级调试工具（仅限 Flutter 应用程序）
性能视图还支持导入和导出数据快照。有关更多信息，请查看导入和导出部分。
什么是 Flutter 中的帧？
Flutter 被设计为以每秒 60 帧 (fps) 的速度渲染其 UI，或在支持 120Hz 更新的设备上以 120 fps 的速度渲染。每次渲染称为一个帧。这意味着，大约每 16 毫秒，UI 就会更新以反映动画或 UI 的其他更改。渲染时间超过 16 毫秒的帧会导致显示设备上的卡顿（不流畅的运动）。
Flutter 帧图表
此图表包含应用程序的 Flutter 帧信息。图表中设置的每个条形图都表示一个 Flutter 帧。条形图使用颜色编码来突出显示渲染 Flutter 帧时发生的不同部分的工作：UI 线程的工作和光栅线程的工作。
此图表包含应用程序的 Flutter 帧计时信息。图表中的每对条形图都表示一个 Flutter 帧。从该图表中选择一个帧会更新帧分析选项卡或时间线事件选项卡下方显示的数据。（从DevTools 2.23.1开始，光栅统计信息是一个独立的功能，没有每帧数据）。
当应用程序中绘制新帧时，Flutter 帧图表会更新。要暂停此图表的更新，请单击图表右侧的暂停按钮。可以通过单击图表上方的Flutter 帧按钮来折叠此图表，以便为下面的数据提供更多查看空间。
表示每个 Flutter 帧的成对条形图使用颜色编码来突出显示渲染 Flutter 帧时发生的不同部分的工作：UI 线程的工作和光栅线程的工作。
UI
UI 线程在 Dart VM 中执行 Dart 代码。这包括应用程序的代码以及 Flutter 框架。当应用程序创建并显示场景时，UI 线程会创建一个图层树，这是一个包含与设备无关的绘制命令的轻量级对象，并将图层树发送到光栅线程在设备上进行渲染。不要阻塞此线程。
光栅
光栅线程执行来自 Flutter Engine 的图形代码。此线程获取图层树并通过与 GPU（图形处理单元）通信来显示它。你无法直接访问光栅线程或其数据，但如果此线程很慢，则可能是你在 Dart 代码中执行了某些操作导致的。图形库 Skia 在此线程上运行。Impeller 也使用此线程。
有时，场景会生成一个易于构建但光栅线程渲染成本很高的图层树。在这种情况下，你需要找出你的代码正在执行哪些操作导致渲染代码变慢。某些特定类型的工作负载对 GPU 来说更困难。它们可能涉及对 saveLayer() 的不必要调用、与多个对象相交的不透明度以及在特定情况下的剪辑或阴影。
有关分析的更多信息，请查看 识别 GPU 图形中的问题。
卡顿（慢帧）
帧渲染图表以红色覆盖显示卡顿。如果完成帧需要超过 ~16 毫秒（对于 60 FPS 设备），则该帧被认为是卡顿的。要实现 60 FPS（每秒帧数）的帧渲染速率，每个帧必须在 ~16 毫秒或更短的时间内渲染。如果未达到此目标，你可能会遇到 UI 卡顿或丢帧。
有关如何分析应用性能的更多信息，请查看 Flutter 性能分析。
着色器编译
当着色器在你的 Flutter 应用中首次使用时，会发生着色器编译。执行着色器编译的帧用深红色标记
有关如何减少着色器编译卡顿的更多信息，请查看 减少移动设备上的着色器编译卡顿。
帧分析选项卡
从上方的 Flutter 帧图表中选择一个卡顿帧（慢，以红色显示），将在帧分析选项卡中显示调试提示。这些提示可帮助你诊断应用中的卡顿，并通知你我们检测到的任何可能导致帧时间变慢的昂贵操作。
光栅统计选项卡
如果你有 Flutter 帧因光栅线程时间慢而卡顿，此工具可能能够帮助你诊断性能变慢的来源。要生成光栅统计数据
- 导航到应用中出现光栅线程卡顿的屏幕。
- 点击拍摄快照。
- 查看不同的图层及其各自的渲染时间。
如果你看到一个昂贵的图层，请找到生成此图层的应用中的 Dart 代码，并进一步调查。你可以对代码进行更改、热重载并拍摄新的快照，以查看你的更改是否改善了图层的性能。
时间线事件选项卡
时间线事件图表显示来自应用程序的所有事件跟踪。Flutter 框架在构建帧、绘制场景和跟踪其他活动（例如 HTTP 请求时间和垃圾回收）时会发出时间线事件。这些事件会显示在时间线中。您还可以使用 dart:developer Timeline 和 TimelineTask API 发送自己的时间线事件。
如需了解如何浏览和使用跟踪查看器，请点击时间线事件选项卡栏右上角的 ? 按钮。如需使用应用程序中的新事件刷新时间线，请点击刷新按钮（同样位于选项卡控件的右上角）。
高级调试工具
增强跟踪
如需在时间线事件图表中查看更详细的跟踪，请使用增强跟踪下拉列表中的选项
如需查看新时间线事件，请在应用程序中再现您感兴趣的跟踪活动，然后选择一个帧来检查时间线。
跟踪小部件构建
如需在时间线中查看 build() 方法事件，请启用 跟踪小部件构建 选项。小部件的名称显示在时间线事件中。
跟踪布局
如需在时间线中查看渲染对象布局事件，请启用 跟踪布局 选项
跟踪绘制
要查看时间轴中的渲染对象绘制事件，请启用跟踪绘制选项
更多调试选项
要诊断与渲染层相关的性能问题，请关闭渲染层。默认情况下，这些选项处于启用状态。
要查看对应用性能的影响，请在应用中重现该活动。然后在帧图表中选择新帧，以检查在禁用图层的情况下发生的时间轴事件。如果光栅时间显著减少，则过度使用已禁用的效果可能是导致应用中出现卡顿的原因。
- 渲染剪辑图层
- 禁用此选项以检查过度使用剪辑是否会影响性能。如果禁用此选项后性能得到改善，请尝试减少在应用中使用剪辑效果。
- 渲染不透明度图层
- 禁用此选项以检查过度使用不透明度效果是否会影响性能。如果禁用此选项后性能得到改善，请尝试减少在应用中使用不透明度效果。
- 渲染物理形状图层
- 禁用此选项以检查过度使用物理建模效果是否会影响性能，例如阴影或海拔。如果禁用此选项后性能得到改善，请尝试减少在应用中使用物理建模效果。
导入和导出
DevTools 支持导入和导出性能快照。单击导出按钮（帧渲染图表上方右上角）会下载性能页面上当前数据的快照。要导入性能快照，可以将快照从任何页面拖放到 DevTools 中。请注意，DevTools 仅支持导入最初从 DevTools 导出的文件。
其他资源
要了解如何使用 DevTools 监控应用的性能并检测卡顿，请查看指导性性能视图教程。