检查Vega应用中的跟踪

“跟踪”测量代码执行时间以确定性能瓶颈。当您的应用响应缓慢或延迟时，跟踪会显示执行过程中代码在何处花费了时间，尤其是在经常调用的函数或密集型操作中花费的时间。

Vega内置了对Perfetto（仅提供英文版）的支持，其为用于分析应用性能的跟踪系统。要跟踪代码的特定区域，您可以使用Systrace（仅提供英文版）添加跟踪点，Systrace是一种允许您从JavaScript发出跟踪的React Native API。

本页提供了进行以下操作的步骤：

• 在您的应用中添加跟踪
• 在执行期间记录跟踪数据
• 使用Perfetto的可视化工具分析执行时间
• 在Perfetto中分析性能模式

视频概述

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

在您的应用中添加跟踪

使用Systrace，可以考虑在代码的以下区域添加跟踪点：

• 经常运行的函数
• 需要较长时间来执行的操作
• 用于用户交互的事件处理程序
• 您怀疑存在性能问题的区域

跟踪焦点性能

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

示例：

// VegaVideoApp中的Systrace代码示例
	 import { Systrace } from "react-native";
	 const FocusableElement = ({
	   focusableElementRef,
	   children,
	   onPress,
	   onBlur,
	   onFocus,
	   getFocusState,
	   onFocusOverrideStyle,
	   style,
	   hasTVPreferredFocus,
	   ...otherProps
	 }: FocusableElementProps) => {
	   const [isFocused, setIsFocused] = useState(false);
	   const focusHandler = () => {
	     Systrace.beginEvent("VegaVideoApp:FocusedElement:onFocus"); // ---> 开始跟踪
	     setIsFocused(true);
	     getFocusState?.(true);
	     onFocus?.();
	     Systrace.endEvent(); // ---> 结束跟踪
	   };
	   const blurHandler = () => {
	     setIsFocused(false);
	     getFocusState?.(false);
	     onBlur?.();
	   };

	   return (
	     <TouchableOpacity
	       ref={focusableElementRef}
	       activeOpacity={1}
	       hasTVPreferredFocus={hasTVPreferredFocus}
	       onFocus={focusHandler}
	       onBlur={blurHandler}
	       onPress={onPress}
	       style={[style, isFocused ? onFocusOverrideStyle : undefined]}
	       testID={otherProps.testID}
	       {...otherProps}
	     >
	       {children}
	     </TouchableOpacity>
	   );
	 };

记录应用跟踪

在应用的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会在您的项目目录中生成以下跟踪文件：

  文件名	描述
  iter*_trace*_-converted.json	跟踪事件格式（仅提供英文版）的JS CPU分析器跟踪文件与Vega Studio兼容。
  iter*_trace*_-original.json	跟踪事件格式（仅提供英文版）的JS CPU分析器跟踪文件与Chrome DevTools兼容。
  iter*_vs_trace	Perfetto跟踪文件。
  *trace-recorder.json	Activity Monitor记录的跟踪文件。 您可以使用Recording View打开此文件来检查Activity Monitor收集的数据。

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

收集跟踪后，使用Perfetto用户界面（仅提供英文版）分析自定义跟踪的持续时间和调用模式。

1. 在Perfetto用户界面中打开您的跟踪文件。

   

2. 选择Open trace file（打开跟踪文件）。
3. 从生成的目录选择iter*_vs_trace或将其拖到Perfetto用户界面网页上。
4. 等待跟踪加载。

5. 在顶部搜索栏中输入跟踪名称以查找您添加的跟踪。下图显示了在onFocus处理程序中添加的VegaVideoApp:FocusedElement: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查询：

SELECT
  EXTRACT_ARG(s.arg_set_id, 'debug.type') AS event_type,
  COUNT(*) AS count,
  AVG(s.dur) / 1e6 AS avg_duration_ms,
  MIN(s.dur) / 1e6 AS min_duration_ms,
  MAX(s.dur) / 1e6 AS max_duration_ms
FROM slice s
WHERE s.name = 'UIManagerBinding::dispatchEvent'
GROUP BY event_type
ORDER BY avg_duration_ms DESC;

此查询将所有UIManagerBinding::dispatchEvent切片按其debug.type（例如topFocus、topBlur、topLoad）对其进行分组，并计算每种类型的数量、平均值、最短和最长持续时间。

要直观地了解如何在Perfetto中浏览轨迹，请参阅分析帧计时中的动画。

分析帧计时

对于流畅度问题，请检查frame切片以识别在导航或滚动期间丢失的帧。

以下动画显示了如何在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查询：

WITH stats AS (
  SELECT
    COUNT(*) AS total_events,
    SUM(CASE WHEN s.dur / 1e6 > 16 THEN 1 ELSE 0 END) AS over_16ms,
    SUM(CASE WHEN s.dur / 1e6 > 33 THEN 1 ELSE 0 END) AS over_33ms,
    SUM(CASE WHEN s.dur / 1e6 > 50 THEN 1 ELSE 0 END) AS over_50ms,
    MAX(s.dur) / 1e6 AS max_dur_ms,
    AVG(s.dur) / 1e6 AS avg_dur_ms
  FROM slice s
  WHERE s.name = 'UIManagerBinding::dispatchEvent'
)
SELECT '事件总数' AS Metric, CAST(total_events AS TEXT) AS Value FROM stats
UNION ALL
SELECT '超过16毫秒事件数', CAST(over_16ms AS TEXT) FROM stats
UNION ALL
SELECT '超过33毫秒事件数', CAST(over_33ms AS TEXT) FROM stats
UNION ALL
SELECT '超过50毫秒事件数', CAST(over_50ms AS TEXT) FROM stats
UNION ALL
SELECT '最长持续事件', PRINTF('%.2fms', max_dur_ms) FROM stats
UNION ALL
SELECT '平均持续事件', PRINTF('%.2fms', avg_dur_ms) FROM stats;

此查询计算有多少事件超过了常见帧预算阈值（60帧/秒为16毫秒，丢失两帧为33毫秒，丢失三帧或更多帧为50毫秒），并报告最长和平均持续时间。

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

Perfetto分析的关键见解是JS线程阻塞和帧丢失之间的相关性。当JS线程忙于同步工作时，流畅度和响应能力都会受到影响。有关视觉参考，请参阅分析帧计时中的动画。

典型的序列如下所示：

1. 用户按下方向键按钮（例如，向右）。
2. 在新聚焦的元素上调用onFocus处理程序。
   • 阻塞性工作（例如同步数据检查）阻塞JS线程。
   • 非原生动画增加了更多JS线程工作。
   • 在此期间，无法渲染多个帧。
3. 用户感觉到卡顿和焦点移动延迟。

要在Perfetto中识别这种模式，请执行以下操作：

1. 在frame跟踪中找到存在丢失的帧的区域。
2. 在同一时间段内检查帧跟踪附近的JS线程活动。
3. 检查较长UIManagerBinding::dispatchEvent切片是否与丢失的帧重叠。

当您看到JS线程阻塞与帧丢失对齐时，根本原因通常是事件处理程序中的同步工作或非原生动画。有关解决这些问题的优化技巧，请参阅应用性能最佳实践。

相关主题

• 应用性能最佳实践
• 衡量应用KPI
• 确定用户界面渲染问题
• 检测过度绘制
• 调查组件重新渲染问题

Last updated: 2026年3月20日