确定用户界面渲染问题
应用中用户界面 (UI) 帧生成速度缓慢会降低流畅度或帧速率，从而导致卡顿。卡顿指用户界面中的卡顿或延迟现象，会导致您的应用变慢或没有响应。“流畅度”指您应用的界面移动和响应用户输入的流畅程度和响应速度。
为了实现流畅的交互，Vega应用要求流畅度关键性能指标 (KPI) 分数达到99%或更高。KPI是一个可衡量的值，用于表示应用有效实现关键目标的程度。
以下各部分说明如何识别应用中的用户界面渲染问题，以实现流畅的性能并达到您的流畅度KPI分数要求。
先决条件
在继续操作之前，请务必完成衡量流畅度和前台内存中的设置。
确定用户界面渲染卡顿问题
在Vega应用KPI可视化工具中运行流畅度KPI测试后，系统会生成有助于确定用户界面延迟原因的工件。这些工件包括流畅度图表、CPU概要图和Perfetto跟踪。
了解流畅度图表
流畅度图表会直观地呈现应用在一段时间内的渲染性能。检查图表时，注意流畅度是否有所下降，这表明存在潜在的性能问题。这类流畅度下降通常与导致用户界面延迟的特定事件或代码执行相关。
确定流畅度下降的原因
- 检查Perfetto轨迹。
分析CPU概要图
CPU概要图显示了在应用中使用不同功能所花费的时间。当您在流畅度图表中看到性能问题时，请在时间戳处展开CPU概要图。这种扩展视图称为火焰图，直观呈现了CPU概要，可显示哪些功能使用的处理时间最长。
折叠火焰图
- 选择root（根）栏。
- 如果视图保持展开状态，请使用
Developer: Reload Webviews命令面板。
使用Perfetto分析跟踪
Perfetto是一款可记录系统跟踪的开源工具，对性能的影响微乎其微。当您开始流畅度测试时，Perfetto会自动在所测Vega设备上收集跟踪。测试完成后，跟踪文件将下载到您的工作站。
您可以在测试输出目录中找到跟踪文件。每个文件均采用以下格式：
iter_<迭代次数>_vs_trace.protobuf
示例文件：iter_3_vs_trace.protobuf
分析测试期间的系统行为
- 打开跟踪文件Perfetto UI。
- 要确定用户界面渲染问题，请检查
Toolkit/Render thread跟踪。 - 寻找可能导致性能下降的长期或重复性活动。
卡顿的常见原因和解决方法
帧大小不匹配
渲染帧时，系统将位图作为OpenGL纹理加载到图形处理单元 (GPU)。OpenGL纹理是用于渲染图形的图像，通常存储在GPU的内存中。
如果帧大小和显示屏分辨率不匹配，则会发生以下操作：
- GPU必须将帧像素映射到显示屏。
- 如果帧大于显示屏，则加载到GPU上的像素会超过所需的像素。
这些不匹配会降低性能并浪费渲染时间。
调查帧大小不匹配
- 在Perfetto（System Trace [系统跟踪]）中，找到观察到延迟的时间附近的
Tools/Render（工具/渲染）线程。 - 检查渲染进程中的延迟。
- 验证帧的宽度和高度是否与目标设备的显示屏大小相匹配。
帧过度绘制
当应用在单个帧内多次渲染同一个像素时，就会发生“帧过度绘制”问题，这会造成计算资源浪费。当应用在没有先清除屏幕的情况下直接在先前绘制的对象上绘制新对象时，就会发生这种情况。
检测应用过度绘制
- 按照检测过度绘制中的步骤操作。
使用React Native Systrace添加自定义跟踪
Vega SDK支持React Native Systrace API，从而您可以添加跟踪标记，并测量应用源代码中函数调用之间的间隔时间。自定义跟踪可帮助您查明代码特定部分的性能问题。
以下代码块显示了如何添加跟踪标记。
const App = () => {
const setCustomTrace = () => {
Systrace.setEnabled(true); // 调用setEnabled以开启分析。
Systrace.beginEvent('custom_label');
Systrace.counterEvent('custom_label', 10);
};
...
const functionToTrace = () => {
...
enableProfiling()
...
};
}
自定义跟踪有助于识别应用中的哪些功能或代码非常耗时。但是，如果不谨慎实施，添加自定义跟踪可能会带来高昂开销，进而导致结果出现误报。
最佳实践
为避免卡顿或渲染速度缓慢，请按照应用性能最佳实践中的Vega应用指南操作。
相关主题
Last updated: 2025年9月30日
