调查用户界面流畅度问题

用户界面 (UI) 流畅度是Vega应用重要的关键性能指标 (KPI)，可确保用户获得流畅的导航体验。对于用户界面交互用例（例如滚动浏览），Vega应用要求用户界面流畅度KPI分数达到99%以上。 如果用户界面流畅度KPI较低，应用往往会出现画面卡顿或抖动，该问题在滚动浏览操作和动画中很明显。 本页概述了识别、分析和解决Vega应用用户界面流畅度问题的流程。

​

先决条件

确保您已：

1. 在Visual Studio (VS) Code中打开的Vega应用项目。
2. 特定于应用的用户界面自动化脚本，可在您的应用中执行快速滚动浏览操作。如果您尚未创建此脚本，请按照衡量流畅度和前台内存中所述的步骤操作。

​

步骤1：使用应用KPI可视化工具衡量用户界面流畅度KPI

完成以下步骤，对Vega应用的用户界面流畅度进行基准测量：

1. 在VS Code中，打开命令面板： Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
2. 输入Kepler: Launch App KPI Visualizer（Kepler：启动应用KPI可视化工具），然后按下Enter。
3. 在KPI Visualizer（KPI可视化工具）对话框中，选择Application UI Fluidity Test（应用程序用户界面流畅度测试），然后按OK（确定）。
4. 在Record CPU Profiler（录制CPU分析器）对话框中，确保未勾选相应的复选框，然后按OK。
5. 在Custom Test Scenario（自定义测试场景）对话框中，选择Yes（是）。
6. 选择用户界面自动化脚本 选择您在先决条件中创建的用户界面自动化脚本。

应用KPI可视化工具会运行您的脚本，然后衡量用户界面流畅度。您应该可以看到用户界面流畅度的KPI Score（KPI分数），如下图所示： 您需要以该分数为基准来提升该项KPI。请记住，Vega应用的用户界面流畅度KPI分数应达到99%以上。 有关KPI测量值及其解读方法的更多详细信息，请参阅衡量应用KPI。

​

步骤2：识别组件渲染

React的重新渲染机制对于让用户界面及时反映最新状态变化至关重要。但是，过度或不必要的重新渲染会显著影响应用的性能和用户界面流畅度。 要识别并解决应用的重新渲染问题，请按照调查组件重新渲染问题中所述的步骤操作。

​

步骤3：识别过度绘制

如果进行不必要的组件重新绘制，就会发生过度绘制，从而影响滚动浏览性能表现。为了优化您的应用，请执行以下操作：

1. 识别过度绘制组件 检测过度绘制组件。按照检测过度绘制中的说明进行操作。
2. 减少应用过度绘制 在您的应用中避免发生过度绘制。按照避免应用过度绘制中的指导操作。

​

步骤4：使用Vega CPU分析器识别对性能要求较高的函数

Vega CPU分析器与应用KPI可视化工具集成，有助于识别影响应用用户界面流畅度KPI的函数，尤其是在滚动浏览期间。 要使用CPU分析器，请执行以下操作：

1. 记录CPU分析器数据 重复步骤1：使用应用KPI可视化工具衡量用户界面流畅度KPI，但选中Record CPU Profiler复选框。
2. 运行CPU分析器之后，应用KPI可视化工具会生成3个工件：
   • 流畅度图表
   • CPU概要图
   • Perfetto轨迹
3. 诊断用户界面渲染问题 分析这些工件，以确定导致性能问题（卡顿）的原因。按照确定用户界面渲染问题中的说明进行操作。
4. 识别出对性能要求较高的函数之后，优化这些功能以提高用户界面流畅度。

​

相关主题

• 在Vega中执行并发渲染
• 社区：如何提高用户界面流畅度
• 应用性能最佳实践
• 衡量应用KPI
• 调查组件重新渲染问题

---