检查Vega应用中的跟踪

“跟踪”测量代码执行时间以确定性能瓶颈。当您的应用响应缓慢或延迟时，跟踪会显示执行过程中代码在何处花费了时间，尤其是在经常调用的函数或密集型操作中花费的时间。 Vega内置了对Perfetto（仅提供英文版）的支持，其为用于分析应用性能的跟踪系统。要跟踪代码的特定区域，您可以使用Systrace（仅提供英文版）添加跟踪点，Systrace是一种允许您从JavaScript发出跟踪的React Native API。本页提供了进行以下操作的步骤：

在您的应用中添加跟踪
在执行期间记录跟踪数据。
使用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>
	   );
	 };

记录应用跟踪

在应用JS代码中添加必要的跟踪后，重建应用，在Vega设备上运行它，并记录跟踪。

步骤1：重建您的应用

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

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

安装并运行应用的重建版本以开始收集跟踪数据。确保在支持Vega的设备上运行您的应用，以进行精确的跟踪测量。有关在Vega设备上运行应用的说明，请参阅在Fire TV Stick上运行您的应用。

步骤3：记录应用跟踪

使用以下选项记录性能问题的跟踪：

选项1：Vega Studio的Activity Monitor
选项2：命令行界面 a. 运行kepler exec perf record —app-name <<交互组件ID>>命令来记录跟踪。 b. 如果记录命令无法运行，请运行kepler exec perf activity-monitor —app-name <<交互组件ID>>。例如，要记录滚动问题的跟踪，请按照以下步骤操作：

启动应用。
运行Activity Monitor。
开始录制。
在应用内执行滚动。
停止记录。

记录完成后，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用户界面中打开您的跟踪文件。
单击Open trace file（打开跟踪文件）。
从generated目录中选择iter*_vs_trace文件。
将iter*_vs_trace文件从generated目录拖到Perfetto用户界面网页上。
等待跟踪加载。
在顶部搜索栏中输入跟踪名称以查找您添加的跟踪。下图显示了在onFocus处理程序中添加的VegaVideoApp:FocusedElement:onFocus跟踪。如果您已经安装了Vega Studio扩展程序，则可以直接在VS Code中打开跟踪文件：
1. 在VS Code中，转到项目生成的目录。
2. 单击要查看的跟踪文件。该文件将在VS Code的Perfetto用户界面中打开。
对于每个跟踪：
- 分析所有事件的持续时间，以验证预期的行为。
- 检查所有堆栈跟踪以确认预期的调用模式。

开发 Vega 应用

视频概述

在您的应用中添加跟踪