视频概述
请观看这段视频(附带中文字幕),它将为您简要介绍如何使用Perfetto。在您的应用中添加跟踪
使用Systrace,可以考虑在代码的以下区域添加跟踪点:- 经常运行的函数
- 需要较长时间来执行的操作
- 用于用户交互的事件处理程序
- 您怀疑存在性能问题的区域
跟踪焦点性能
如需调查在滚动带有TouchableOpacity组件的FlatList时缓慢焦点行为,则在onFocus回调函数周围添加跟踪。
示例:
记录应用跟踪
在应用的JavaScript代码中添加跟踪后,在Vega设备上重建并运行应用。然后记录跟踪。步骤1:重建您的应用
重建您的应用,将性能跟踪整合到App Bundle中。使用Release构建配置来进行准确的跟踪测量。有关构建说明,请参阅构建您的应用。
步骤2:安装和运行您的应用
在支持Vega的设备上安装并运行应用的重建版本。有关说明,请参阅在Fire TV Stick上运行您的应用程序。步骤3:记录应用跟踪
使用以下选项记录性能问题的跟踪:- 选项1:Vega Studio的Activity Monitor
- 选项2:命令行界面 a. 运行vega exec perf record —app-name <<交互组件ID>>命令来记录跟踪。 b. 如果记录命令无法运行,请运行vega exec perf activity-monitor —app-name <<交互组件ID>>。 例如,要记录滚动问题的跟踪,请按照以下步骤操作:
- 启动应用。
- 运行Activity Monitor。
- 开始录制。
- 在应用内执行滚动。
-
停止记录。
generated目录中创建输出文件。目录的名称表示记录时间戳。
Activity Monitor会在您的项目目录中生成以下跟踪文件:
在Perfetto用户界面中分析应用跟踪
收集跟踪后,使用Perfetto用户界面(仅提供英文版)分析自定义跟踪的持续时间和调用模式。-
在Perfetto用户界面中打开您的跟踪文件。
- 选择Open trace file(打开跟踪文件)。
- 从生成的目录选择iter*_vs_trace或将其拖到Perfetto用户界面网页上。
- 等待跟踪加载。
-
在顶部搜索栏中输入跟踪名称以查找您添加的跟踪。
下图显示了在
onFocus处理程序中添加的VegaVideoApp:FocusedElement:onFocus跟踪。
如果您已经安装了Vega Studio扩展程序,则可以直接在VS Code中打开跟踪文件:
- 在VS Code中,转到项目生成的目录。
- 选择要查看的跟踪文件。该文件将在VS Code的Perfetto用户界面中打开。
- 分析所有事件的持续时间,以验证预期的行为。
- 检查所有堆栈跟踪以确认预期的调用模式。
在Perfetto中分析性能模式
除了检查单个跟踪外,Perfetto还可以帮助您识别影响流畅度和响应能力的更广泛性能模式。以下小节介绍常用的分析技术。分析事件处理时间
UIManagerBinding::dispatchEvent片段显示了在JS线程上处理每个用户界面事件所需的时间。每个切片都有一个用于标识事件类型的debug.type参数。要进行对焦和模糊分析,请查找debug.type为topFocus或topBlur的切片。
事件持续时间较长表示您的事件处理程序中存在阻塞性工作。
要分析事件处理时间,请执行以下操作:
- 在Perfetto用户界面中,在搜索栏中搜索
UIManagerBinding::dispatchEvent。 - 选择一个切片以查看其详细信息。
- 在详细信息面板中,检查
debug.type参数以识别事件类型(例如,topFocus、topBlur、topLoad)。 - 查看焦点和模糊事件切片的持续时间。这些事件应该在16毫秒以内完成。
- 在事件持续时间中寻找模式。例如,如果
topFocus事件持续耗时50毫秒,则表示onFocus处理程序内存在阻塞性工作。
在此示例中,耗时50–52毫秒的焦点事件直接对应于焦点处理程序中同步的阻塞性工作。约22毫秒的模糊事件表示模糊处理程序中有类似的阻塞性工作。
要根据自己的跟踪生成这些指标,请在Perfetto的查询编辑器(Query (SQL)(查询(SQL))选项卡)中运行以下SQL查询:
UIManagerBinding::dispatchEvent切片按其debug.type(例如topFocus、topBlur、topLoad)对其进行分组,并计算每种类型的数量、平均值、最短和最长持续时间。
要直观地了解如何在Perfetto中浏览轨迹,请参阅分析帧计时中的动画。
分析帧计时
对于流畅度问题,请检查frame切片以识别在导航或滚动期间丢失的帧。
以下动画显示了如何在Perfetto用户界面中查找较长帧:
要分析帧计时,请执行以下操作:
- 在Perfetto用户界面中找到应用进程下的
frame跟踪。 - 识别超过16.67毫秒(60帧/秒渲染的预算)的帧。较长帧在时间线中显示为较宽的条形。
- 放大帧的长度超出预期的区域。
占用62.94毫秒的帧表示应用丢失了大约四帧(62.94毫秒/16.67毫秒 ≈ 4)。此数据与KPI可视化工具中的“5+ Consecutive Dropped Frames”(连续丢失的帧数超过5)KPI相关。有关流畅度指标的更多信息,请参阅衡量应用KPI。要调查用户界面渲染问题,请参阅识别用户界面渲染问题。
要根据自己的跟踪生成帧计时摘要,请在Perfetto的查询编辑器(Query (SQL)选项卡)中运行以下SQL查询:
将JS工作与帧丢失关联起来
Perfetto分析的关键见解是JS线程阻塞和帧丢失之间的相关性。当JS线程忙于同步工作时,流畅度和响应能力都会受到影响。有关视觉参考,请参阅分析帧计时中的动画。 典型的序列如下所示:- 用户按下方向键按钮(例如,向右)。
- 在新聚焦的元素上调用
onFocus处理程序。- 阻塞性工作(例如同步数据检查)阻塞JS线程。
- 非原生动画增加了更多JS线程工作。
- 在此期间,无法渲染多个帧。
- 用户感觉到卡顿和焦点移动延迟。
- 在
frame跟踪中找到存在丢失的帧的区域。 - 在同一时间段内检查帧跟踪附近的JS线程活动。
- 检查较长
UIManagerBinding::dispatchEvent切片是否与丢失的帧重叠。

