确定用户界面渲染问题

​

先决条件

​

确定用户界面渲染卡顿问题

​

了解流畅度图表

• 检查Perfetto轨迹。

​

分析CPU概要图

1. 选择root（根）栏。
2. 如果视图保持展开状态，请使用Developer: Reload Webviews命令面板。

​

使用Perfetto分析跟踪

iter_<迭代次数>_vs_trace.protobuf

1. 打开跟踪文件Perfetto UI。
2. 要确定用户界面渲染问题，请检查Toolkit/Render thread跟踪。
3. 寻找可能导致性能下降的长期或重复性活动。

​

卡顿的常见原因和解决方法

​

帧大小不匹配

• GPU必须将帧像素映射到显示屏。
• 如果帧大于显示屏，则加载到GPU上的像素会超过所需的像素。

1. 在Perfetto（System Trace [系统跟踪]）中，找到观察到延迟的时间附近的Tools/Render（工具/渲染）线程。
2. 检查渲染进程中的延迟。
3. 验证帧的宽度和高度是否与目标设备的显示屏大小相匹配。

​

帧过度绘制

• 按照检测过度绘制中的步骤操作。

​

使用React Native Systrace添加自定义跟踪

 const App = () => {
   const setCustomTrace = () => {
     Systrace.setEnabled(true); // 调用setEnabled以开启分析。
     Systrace.beginEvent('custom_label');
     Systrace.counterEvent('custom_label', 10);
   };
   ...
   const functionToTrace = () => {
     ...
     enableProfiling()
     ...
   };
 }

​

最佳实践

​

相关主题

• ▶️ 如何使用Perfetto跟踪调试性能问题（附带中文字幕）
• 💬 社区：如何提高用户界面流畅度
• 应用性能最佳实践
• 衡量应用KPI