调查用户界面流畅度问题

用户界面 (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，然后按下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. 重复步骤1： 使用应用KPI可视化工具衡量用户界面流畅度KPI，但选中Record CPU Profiler（记录CPU分析器）复选框。

   

2. 运行CPU分析器之后，应用KPI可视化工具会生成3个工件：

   • 流畅度图表
   • CPU概要图
   • Perfetto轨迹

3. 分析这些工件，以确定导致性能问题（卡顿）的原因。按照确定用户界面渲染问题中的说明进行操作。

4. 识别出对性能要求较高的函数之后，优化这些功能以提高用户界面流畅度。

相关主题

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

---

Last updated: 2025年9月30日