检查Vega应用中的跟踪
“跟踪”通过测量代码中特定点之间的执行时间，帮助您识别Vega应用中的性能瓶颈。当您的应用响应缓慢或延迟时，跟踪会显示在执行过程中花费的时间，尤其是在经常调用的函数或密集型操作中花费的时间。
Vega内置了对Perfetto（仅提供英文版）的支持，其为用于分析应用性能的跟踪系统。要跟踪代码的特定区域，您可以使用Systrace（仅提供英文版）添加跟踪点，Systrace是一种允许您从JavaScript发出跟踪的React Native API。
本页提供了进行以下操作的步骤：
视频概述
请观看这段视频（附带中文字幕），它将为您简要介绍如何使用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>
);
};
记录应用跟踪
在应用JS代码中添加必要的跟踪后，重建应用，在Vega设备上运行它，并记录跟踪。
步骤1： 重建您的应用
重建您的应用，将性能跟踪整合到App Bundle中。确保使用Release构建配置来进行准确的跟踪测量。有关构建说明，请参阅构建您的应用。
步骤2： 安装和运行您的应用
安装并运行应用的重建版本以开始收集跟踪数据。确保在支持Vega的设备上运行您的应用，以进行精确的跟踪测量。有关在Vega设备上运行应用的说明，请参阅运行您的应用。
步骤3： 记录应用跟踪
使用以下选项记录性能问题的跟踪：
-
选项2： 命令行界面
a. 运行
kepler exec perf record --app-name <<交互组件ID>>命令来记录跟踪。b. 如果记录命令无法运行，请运行
kepler exec perf activity-monitor --app-name <<交互组件ID>>。例如，要记录滚动问题的跟踪，请按照以下步骤操作：
- 启动应用。
- 运行Activity Monitor。
- 开始录制。
- 在应用内执行滚动。
- 停止记录。
输出文件位于generated目录中 记录完成后，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用户界面（仅提供英文版）分析自定义跟踪的持续时间和调用模式。
-
在Perfetto用户界面中打开您的跟踪文件。
在Perfetto中打开跟踪文件 - 单击Open trace file（打开跟踪文件）。
- 从generated目录中选择iter*_vs_trace文件。
- 将iter*_vs_trace文件从generated目录拖到Perfetto用户界面网页上。
- 等待跟踪加载。
-
在顶部搜索栏中输入跟踪名称以查找您添加的跟踪。
下图显示了在
onFocus处理程序中添加的VegaVideoApp:FocusedElement:onFocus跟踪。
在onFocus处理程序中添加了跟踪 如果您已经安装了Vega Studio扩展程序，则可以直接在VS Code中打开跟踪文件：
- 在VS Code中，转到项目生成的目录。
- 单击要查看的跟踪文件。该文件将在VS Code的Perfetto用户界面中打开。
对于每个跟踪：
- 分析所有事件的持续时间，以验证预期的行为。
- 检查下面所有堆栈跟踪以确认预期的调用模式。
故障排除
跟踪未结束
如果跟踪在Perfetto用户界面中显示为未完成，请验证在您的代码中是否执行了Systrace.endEvent() API调用。
例如：
当将Systrace.endEvent() 放置在函数中的早期返回语句之后，从而阻止其执行时，跟踪会显示为未完成。
相关主题
Last updated: 2025年10月1日
