as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
Ring
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
跳转到主要内容
“跟踪”测量代码执行时间以确定性能瓶颈。当您的应用响应缓慢或延迟时,跟踪会显示执行过程中代码在何处花费了时间,尤其是在经常调用的函数或密集型操作中花费的时间。 Vega内置了对Perfetto(仅提供英文版)的支持,其为用于分析应用性能的跟踪系统。要跟踪代码的特定区域,您可以使用Systrace(仅提供英文版)添加跟踪点,Systrace是一种允许您从JavaScript发出跟踪的React Native API。 本页提供了进行以下操作的步骤:

视频概述

请观看这段视频(附带中文字幕),它将为您简要介绍如何使用Perfetto。

在您的应用中添加跟踪

使用Systrace,可以考虑在代码的以下区域添加跟踪点:
  • 经常运行的函数
  • 需要较长时间来执行的操作
  • 用于用户交互的事件处理程序
  • 您怀疑存在性能问题的区域

跟踪焦点性能

如需调查在滚动带有TouchableOpacity组件的FlatList时缓慢焦点行为,则在onFocus回调函数周围添加跟踪。 示例:

记录应用跟踪

在应用的JavaScript代码中添加跟踪后,在Vega设备上重建并运行应用。然后记录跟踪。

步骤1:重建您的应用

重建您的应用,将性能跟踪整合到App Bundle中。使用Release构建配置来进行准确的跟踪测量。有关构建说明,请参阅构建您的应用。

步骤2:安装和运行您的应用

在支持Vega的设备上安装并运行应用的重建版本。有关说明,请参阅运行您的应用。

步骤3:记录应用跟踪

使用以下选项记录性能问题的跟踪:
  • 选项1:Vega Studio的Activity Monitor
  • 选项2:命令行界面 a. 运行vega exec perf record —app-name <<交互组件ID>>命令来记录跟踪。 b. 如果记录命令无法运行,请运行vega exec perf activity-monitor —app-name <<交互组件ID>>。 例如,要记录滚动问题的跟踪,请按照以下步骤操作:
  1. 启动应用。
  2. 运行Activity Monitor。
  3. 开始录制。
  4. 在应用内执行滚动。
  5. 停止记录。 显示所生成目录下输出文件的屏幕截图。
记录完成后,Activity Monitor会在项目的generated目录中创建输出文件。目录的名称表示记录时间戳。 Activity Monitor会在您的项目目录中生成以下跟踪文件:

在Perfetto用户界面中分析应用跟踪

收集跟踪后,使用Perfetto用户界面(仅提供英文版)分析自定义跟踪的持续时间和调用模式。
  1. 在Perfetto用户界面中打开您的跟踪文件。 显示在Perfetto中打开的跟踪文件的屏幕截图。
  2. 选择Open trace file(打开跟踪文件)。
  3. 从生成的目录选择iter*_vs_trace或将其拖到Perfetto用户界面网页上。
  4. 等待跟踪加载。
  5. 在顶部搜索栏中输入跟踪名称以查找您添加的跟踪。 下图显示了在onFocus处理程序中添加的VegaVideoApp:FocusedElement:onFocus跟踪。 显示onFocus处理程序中添加的跟踪的屏幕截图。 如果您已经安装了Vega Studio扩展程序,则可以直接在VS Code中打开跟踪文件:
    1. 在VS Code中,转到项目生成的目录。
    2. 选择要查看的跟踪文件。该文件将在VS Code的Perfetto用户界面中打开。
    对于每个跟踪:
    • 分析所有事件的持续时间,以验证预期的行为。
    • 检查所有堆栈跟踪以确认预期的调用模式。

在Perfetto中分析性能模式

除了检查单个跟踪外,Perfetto还可以帮助您识别影响流畅度和响应能力的更广泛性能模式。以下小节介绍常用的分析技术。

分析事件处理时间

UIManagerBinding::dispatchEvent片段显示了在JS线程上处理每个用户界面事件所需的时间。每个切片都有一个用于标识事件类型的debug.type参数。要进行对焦和模糊分析,请查找debug.type为topFocus或topBlur的切片。 事件持续时间较长表示您的事件处理程序中存在阻塞性工作。 要分析事件处理时间,请执行以下操作:
  1. 在Perfetto用户界面中,在搜索栏中搜索UIManagerBinding::dispatchEvent。
  2. 选择一个切片以查看其详细信息。
  3. 在详细信息面板中,检查debug.type参数以识别事件类型(例如,topFocus、topBlur、topLoad)。
  4. 查看焦点和模糊事件切片的持续时间。这些事件应该在16毫秒以内完成。
  5. 在事件持续时间中寻找模式。例如,如果topFocus事件持续耗时50毫秒,则表示onFocus处理程序内存在阻塞性工作。
有关优化事件处理程序的技巧,请参阅应用性能最佳实践。要更详细地研究JS线程活动,请参阅调查JavaScript线程性能。 下表显示了示例应用的事件处理程序中存在阻塞性工作的示例指标。您的值将根据应用的实现而有所不同。 在此示例中,耗时50–52毫秒的焦点事件直接对应于焦点处理程序中同步的阻塞性工作。约22毫秒的模糊事件表示模糊处理程序中有类似的阻塞性工作。 要根据自己的跟踪生成这些指标,请在Perfetto的查询编辑器(Query (SQL)(查询(SQL))选项卡)中运行以下SQL查询:
此查询将所有UIManagerBinding::dispatchEvent切片按其debug.type(例如topFocus、topBlur、topLoad)对其进行分组,并计算每种类型的数量、平均值、最短和最长持续时间。 要直观地了解如何在Perfetto中浏览轨迹,请参阅分析帧计时中的动画。

分析帧计时

对于流畅度问题,请检查frame切片以识别在导航或滚动期间丢失的帧。 以下动画显示了如何在Perfetto用户界面中查找较长帧: 动画GIF,展示如何识别Perfetto用户界面帧跟踪内的较长帧。 要分析帧计时,请执行以下操作:
  1. 在Perfetto用户界面中找到应用进程下的frame跟踪。
  2. 识别超过16.67毫秒(60帧/秒渲染的预算)的帧。较长帧在时间线中显示为较宽的条形。
  3. 放大帧的长度超出预期的区域。
下表显示了来自同一示例应用的帧计时指标示例。将这些数据与您自己的跟踪数据进行比较,以评估应用的流畅度。 占用62.94毫秒的帧表示应用丢失了大约四帧(62.94毫秒/16.67毫秒 ≈ 4)。此数据与KPI可视化工具中的“5+ Consecutive Dropped Frames”(连续丢失的帧数超过5)KPI相关。有关流畅度指标的更多信息,请参阅衡量应用KPI。要调查用户界面渲染问题,请参阅识别用户界面渲染问题。 要根据自己的跟踪生成帧计时摘要,请在Perfetto的查询编辑器(Query (SQL)选项卡)中运行以下SQL查询:
此查询计算有多少事件超过了常见帧预算阈值(60帧/秒为16毫秒,丢失两帧为33毫秒,丢失三帧或更多帧为50毫秒),并报告最长和平均持续时间。

将JS工作与帧丢失关联起来

Perfetto分析的关键见解是JS线程阻塞和帧丢失之间的相关性。当JS线程忙于同步工作时,流畅度和响应能力都会受到影响。有关视觉参考,请参阅分析帧计时中的动画。 典型的序列如下所示:
  1. 用户按下方向键按钮(例如,向右)。
  2. 在新聚焦的元素上调用onFocus处理程序。
    • 阻塞性工作(例如同步数据检查)阻塞JS线程。
    • 非原生动画增加了更多JS线程工作。
    • 在此期间,无法渲染多个帧。
  3. 用户感觉到卡顿和焦点移动延迟。
要在Perfetto中识别这种模式,请执行以下操作:
  1. 在frame跟踪中找到存在丢失的帧的区域。
  2. 在同一时间段内检查帧跟踪附近的JS线程活动。
  3. 检查较长UIManagerBinding::dispatchEvent切片是否与丢失的帧重叠。
当您看到JS线程阻塞与帧丢失对齐时,根本原因通常是事件处理程序中的同步工作或非原生动画。有关解决这些问题的优化技巧,请参阅应用性能最佳实践。

相关主题


最后修改于 2026年10月26日