HarmonyOS开发：性能测试——UI性能测试

核心要点：UI性能测试关注帧率、响应时间、渲染耗时三大指标，通过自动化脚本采集性能数据并与基线对比，确保用户体验不因代码变更而退化。

背景与动机

你的App功能都正常，但用户说"用起来卡"。哪里卡？多卡？是列表滑动掉帧，还是页面跳转慢？你手动操作感觉还行啊——但你的感觉靠得住吗？

性能问题有个特点：开发者的设备通常比用户的设备好，开发者对App的交互路径很熟悉所以操作很快，而用户第一次用可能到处乱点。你觉得"还行"的体验，用户可能已经不耐烦了。

更关键的是，性能退化是渐进的。今天加个动画，明天加个接口调用，每次只慢一点点，谁都没注意。等用户开始投诉的时候，已经积重难返了。

所以你需要性能测试——用数据说话，而不是靠感觉。帧率是多少？响应时间多长？渲染耗时多少？这些指标量化了用户体验，而且可以自动化采集，每次代码变更都跑一遍，性能退化立刻暴露。

核心原理

UI性能的三大指标

graph TB
    A[UI性能指标] --> B[帧率 FPS]
    A --> C[响应时间]
    A --> D[渲染耗时]
    
    B --> B1["滑动帧率: ≥55fps"]
    B --> B2["动画帧率: ≥58fps"]
    B --> B3["静态页面: 60fps"]
    
    C --> C1["点击响应: ≤100ms"]
    C --> C2["页面跳转: ≤500ms"]
    C --> C3["数据加载: ≤1s"]
    
    D --> D1["首帧渲染: ≤200ms"]
    D --> D2["布局计算: ≤16ms"]
    D --> D3["绘制耗时: ≤16ms"]
    
    classDef root fill:#4A90D9,stroke:#2C5F8A,color:#fff
    classDef fps fill:#67C23A,stroke:#3E9B2B,color:#fff
    classDef response fill:#E6A23C,stroke:#B07D2B,color:#fff
    classDef render fill:#F56C6C,stroke:#C94A4A,color:#fff
    
    class A root
    class B,B1,B2,B3 fps
    class C,C1,C2,C3 response
    class D,D1,D2,D3 render

性能测试流程

flowchart TD
    A[定义性能场景] --> B[采集性能基线]
    B --> C[编写性能测试脚本]
    C --> D[执行测试并采集数据]
    D --> E[与基线对比]
    E --> F{性能退化?}
    F -->|是| G[定位性能瓶颈]
    G --> H[优化代码]
    H --> D
    F -->|否| I[更新性能基线]
    I --> J[集成到CI流水线]
    
    classDef start fill:#4A90D9,stroke:#2C5F8A,color:#fff
    classDef process fill:#67C23A,stroke:#3E9B2B,color:#fff
    classDef decision fill:#E6A23C,stroke:#B07D2B,color:#fff
    classDef fail fill:#F56C6C,stroke:#C94A4A,color:#fff
    classDef success fill:#9B59B6,stroke:#7D3C98,color:#fff
    
    class A start
    class B,C,D,E process
    class F decision
    class G,H fail
    class I,J success

性能基线的概念

性能基线就是"当前可接受的性能水平"。你第一次跑性能测试时采集到的数据就是初始基线。后续每次运行，都和基线对比——如果帧率下降了5%以上，或者响应时间增加了20%以上，就认为性能退化了。

基线不是一成不变的。随着功能增加，某些指标可能合理地变差（比如页面内容更多了，渲染自然更慢）。这时候需要人工审核，确认退化是合理的，然后更新基线。

代码实战

基础用法：帧率采集

// 466_ui_performance_test_basic.ets
import { Driver, ON } from '@ohos.UiTest';

export default function basicPerformanceTest() {
  const driver = Driver.create();
  
  // ===== 1. 开始性能数据采集 =====
  // 在操作前开始采集，操作后停止采集
  driver.startPerformanceRecord({
    fps: true,           // 采集帧率
    cpu: true,           // 采集CPU使用率
    memory: true,        // 采集内存使用
    network: false,      // 不采集网络数据
  });
  
  // ===== 2. 执行操作 =====
  // 模拟用户滑动列表
  const list = driver.findComponent(ON.id('product_list'));
  if (list !== null) {
    // 连续滑动3次
    for (let i = 0; i < 3; i++) {
      list.swipe(SwipeDirection.UP, 300);
      await sleep(500);
    }
  }
  
  // ===== 3. 停止采集并获取数据 =====
  const perfData = driver.stopPerformanceRecord();
  
  console.info('===== 性能数据 =====');
  console.info(`平均帧率: ${perfData.avgFps} fps`);
  console.info(`最低帧率: ${perfData.minFps} fps`);
  console.info(`帧率标准差: ${perfData.fpsStdDev}`);
  console.info(`平均CPU使用率: ${perfData.avgCpu}%`);
  console.info(`峰值内存: ${perfData.peakMemory} KB`);
  
  // ===== 4. 简单判断 =====
  if (perfData.avgFps < 55) {
    console.error(`❌ 帧率不达标: ${perfData.avgFps}fps < 55fps`);
  } else {
    console.info(`✅ 帧率达标: ${perfData.avgFps}fps`);
  }
}

function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

进阶用法：响应时间与渲染耗时测试

// 466_ui_performance_test_advanced.ets
import { Driver, ON } from '@ohos.UiTest';

// 性能测试工具类
class PerformanceTester {
  private driver: Driver;
  private baselines: Map<string, PerformanceBaseline>;
  
  constructor(driver: Driver) {
    this.driver = driver;
    this.baselines = new Map();
  }
  
  // 测试页面跳转耗时
  async measurePageTransition(
    triggerSelector: ON,
    targetSelector: ON,
    label: string
  ): Promise<number> {
    // 记录开始时间
    const startTime = Date.now();
    
    // 触发跳转
    const trigger = this.driver.findComponent(triggerSelector);
    trigger?.click();
    
    // 等待目标页面出现
    this.driver.assertComponentExistence(targetSelector, 5000);
    
    // 记录结束时间
    const endTime = Date.now();
    const duration = endTime - startTime;
    
    console.info(`⏱️ ${label} 跳转耗时: ${duration}ms`);
    return duration;
  }
  
  // 测试点击响应时间
  async measureClickResponse(
    clickSelector: ON,
    responseSelector: ON,
    label: string
  ): Promise<number> {
    const startTime = Date.now();
    
    const btn = this.driver.findComponent(clickSelector);
    btn?.click();
    
    // 等待响应出现
    this.driver.assertComponentExistence(responseSelector, 3000);
    
    const duration = Date.now() - startTime;
    console.info(`⏱️ ${label} 响应时间: ${duration}ms`);
    return duration;
  }
  
  // 测试列表滑动帧率
  async measureScrollFps(
    listSelector: ON,
    scrollCount: number,
    label: string
  ): Promise<FpsResult> {
    // 开始采集
    this.driver.startPerformanceRecord({ fps: true, cpu: false, memory: false, network: false });
    
    const list = this.driver.findComponent(listSelector);
    if (list === null) {
      this.driver.stopPerformanceRecord();
      return { avgFps: 0, minFps: 0, jankCount: 0 };
    }
    
    // 执行滑动
    for (let i = 0; i < scrollCount; i++) {
      list.swipe(SwipeDirection.UP, 300);
      await this.sleep(300);
    }
    
    // 停止采集
    const data = this.driver.stopPerformanceRecord();
    
    const result: FpsResult = {
      avgFps: data.avgFps,
      minFps: data.minFps,
      jankCount: data.jankCount ?? 0,
    };
    
    console.info(`📊 ${label} 滑动帧率: 平均${result.avgFps}fps, 最低${result.minFps}fps, 卡顿${result.jankCount}次`);
    return result;
  }
  
  // 测试首帧渲染时间
  async measureFirstFrameRender(
    pageLoadAction: () => Promise<void>,
    targetSelector: ON,
    label: string
  ): Promise<number> {
    const startTime = Date.now();
    
    // 执行页面加载动作
    await pageLoadAction();
    
    // 等待首帧渲染完成（目标组件出现）
    this.driver.assertComponentExistence(targetSelector, 5000);
    
    const duration = Date.now() - startTime;
    console.info(`⏱️ ${label} 首帧渲染: ${duration}ms`);
    return duration;
  }
  
  // 与基线对比
  compareWithBaseline(label: string, actual: number, baselineKey: string, threshold: number = 0.2): boolean {
    const baseline = this.baselines.get(baselineKey);
    if (baseline === undefined) {
      console.info(`📊 ${label}: 无基线数据，跳过对比`);
      return true;
    }
    
    const diff = (actual - baseline.value) / baseline.value;
    const passed = diff <= threshold;
    
    if (passed) {
      console.info(`✅ ${label}: ${actual}ms (基线${baseline.value}ms, 偏差${(diff * 100).toFixed(1)}%)`);
    } else {
      console.error(`❌ ${label}: ${actual}ms (基线${baseline.value}ms, 偏差${(diff * 100).toFixed(1)}% > ${(threshold * 100).toFixed(0)}%)`);
    }
    
    return passed;
  }
  
  // 设置基线
  setBaseline(key: string, value: number): void {
    this.baselines.set(key, { value, timestamp: Date.now() });
  }
  
  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

interface FpsResult {
  avgFps: number;
  minFps: number;
  jankCount: number;
}

interface PerformanceBaseline {
  value: number;
  timestamp: number;
}

完整示例：App核心场景性能测试套件

// 466_ui_performance_test_full.ets
import { Driver, ON } from '@ohos.UiTest';

// 性能测试套件
class AppPerformanceSuite {
  private driver: Driver;
  private tester: PerformanceTester;
  private report: PerformanceReport;
  
  constructor() {
    this.driver = Driver.create();
    this.tester = new PerformanceTester(this.driver);
    this.report = new PerformanceReport();
    
    // 加载性能基线（实际项目从文件读取）
    this.loadBaselines();
  }
  
  // 加载基线数据
  private loadBaselines(): void {
    // 实际项目从JSON文件读取
    this.tester.setBaseline('home_scroll_fps', 58);
    this.tester.setBaseline('product_page_transition', 350);
    this.tester.setBaseline('search_response', 200);
    this.tester.setBaseline('cart_page_render', 400);
    this.tester.setBaseline('list_scroll_jank', 2);
  }
  
  // 场景1：首页列表滑动性能
  async testHomeScrollPerformance(): Promise<void> {
    console.info('\n📊 测试场景: 首页列表滑动');
    
    // 确保在首页
    const homeTab = this.driver.findComponent(ON.id('tab_home'));
    homeTab?.click();
    await this.sleep(1000);
    
    // 测量滑动帧率
    const fpsResult = await this.tester.measureScrollFps(
      ON.id('home_list'),
      5,
      '首页列表'
    );
    
    this.report.addResult('首页列表滑动帧率', {
      value: fpsResult.avgFps,
      unit: 'fps',
      baseline: 58,
      passed: fpsResult.avgFps >= 55,
    });
    
    this.report.addResult('首页列表卡顿次数', {
      value: fpsResult.jankCount,
      unit: '次',
      baseline: 2,
      passed: fpsResult.jankCount <= 3,
    });
  }
  
  // 场景2：页面跳转性能
  async testPageTransitionPerformance(): Promise<void> {
    console.info('\n📊 测试场景: 页面跳转');
    
    // 首页 → 商品详情
    const transitionTime = await this.tester.measurePageTransition(
      ON.id('product_item_0'),
      ON.id('product_detail_page'),
      '首页→商品详情'
    );
    
    this.report.addResult('首页→商品详情跳转', {
      value: transitionTime,
      unit: 'ms',
      baseline: 350,
      passed: transitionTime <= 500,
    });
    
    // 返回首页
    this.driver.pressKey(KeyCode.BACK);
    await this.sleep(500);
  }
  
  // 场景3：搜索响应性能
  async testSearchResponsePerformance(): Promise<void> {
    console.info('\n📊 测试场景: 搜索响应');
    
    // 点击搜索框
    const searchBox = this.driver.findComponent(ON.id('search_box'));
    searchBox?.click();
    await this.sleep(300);
    
    // 输入关键词并测量响应时间
    const responseTime = await this.tester.measureClickResponse(
      ON.id('search_input'),
      ON.id('search_result_list'),
      '搜索响应'
    );
    
    // 先输入文本
    const searchInput = this.driver.findComponent(ON.id('search_input'));
    searchInput?.inputText('蓝牙耳机');
    this.driver.pressKey(KeyCode.ENTER);
    
    this.report.addResult('搜索响应时间', {
      value: responseTime,
      unit: 'ms',
      baseline: 200,
      passed: responseTime <= 300,
    });
    
    // 返回首页
    this.driver.pressKey(KeyCode.BACK);
    await this.sleep(300);
  }
  
  // 场景4：购物车页面渲染性能
  async testCartPageRenderPerformance(): Promise<void> {
    console.info('\n📊 测试场景: 购物车页面渲染');
    
    const renderTime = await this.tester.measurePageTransition(
      ON.id('tab_cart'),
      ON.id('cart_page'),
      '购物车页面'
    );
    
    this.report.addResult('购物车页面渲染', {
      value: renderTime,
      unit: 'ms',
      baseline: 400,
      passed: renderTime <= 600,
    });
  }
  
  // 场景5：长时间使用的内存泄漏检测
  async testMemoryLeak(): Promise<void> {
    console.info('\n📊 测试场景: 内存泄漏检测');
    
    // 采集初始内存
    this.driver.startPerformanceRecord({ fps: false, cpu: false, memory: true, network: false });
    await this.sleep(1000);
    const initialData = this.driver.stopPerformanceRecord();
    const initialMemory = initialData.peakMemory;
    
    // 反复操作10次
    for (let i = 0; i < 10; i++) {
      // 进入商品详情
      const product = this.driver.findComponent(ON.id('product_item_0'));
      product?.click();
      await this.sleep(500);
      
      // 返回首页
      this.driver.pressKey(KeyCode.BACK);
      await this.sleep(300);
    }
    
    // 采集最终内存
    this.driver.startPerformanceRecord({ fps: false, cpu: false, memory: true, network: false });
    await this.sleep(1000);
    const finalData = this.driver.stopPerformanceRecord();
    const finalMemory = finalData.peakMemory;
    
    // 计算内存增长
    const memoryGrowth = ((finalMemory - initialMemory) / initialMemory) * 100;
    const hasLeak = memoryGrowth > 20; // 内存增长超过20%认为有泄漏
    
    this.report.addResult('内存增长（10次操作）', {
      value: memoryGrowth,
      unit: '%',
      baseline: 0,
      passed: !hasLeak,
    });
    
    console.info(`📊 初始内存: ${initialMemory}KB, 最终内存: ${finalMemory}KB, 增长: ${memoryGrowth.toFixed(1)}%`);
  }
  
  // 运行所有测试
  async runAll(): Promise<void> {
    console.info('📊 ===== 开始UI性能测试 =====');
    
    await this.testHomeScrollPerformance();
    await this.testPageTransitionPerformance();
    await this.testSearchResponsePerformance();
    await this.testCartPageRenderPerformance();
    await this.testMemoryLeak();
    
    this.report.print();
  }
  
  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// 性能报告
class PerformanceReport {
  private results: Array<{
    name: string;
    value: number;
    unit: string;
    baseline: number;
    passed: boolean;
  }> = [];
  
  addResult(name: string, result: { value: number; unit: string; baseline: number; passed: boolean }): void {
    this.results.push({ name, ...result });
  }
  
  print(): void {
    console.info('\n📊 ===== UI性能测试报告 =====');
    console.info('─'.repeat(60));
    
    for (const r of this.results) {
      const status = r.passed ? '✅' : '❌';
      console.info(`${status} ${r.name}: ${r.value}${r.unit} (基线: ${r.baseline}${r.unit})`);
    }
    
    const passed = this.results.filter(r => r.passed).length;
    const total = this.results.length;
    console.info('─'.repeat(60));
    console.info(`通过率: ${passed}/${total} (${(passed / total * 100).toFixed(0)}%)`);
  }
}

// 执行测试
export default async function runPerformanceTest() {
  const suite = new AppPerformanceSuite();
  await suite.runAll();
}

踩坑与注意事项

坑1：性能数据的波动性

性能数据不是稳定的。同一台设备跑同一套测试，帧率可能在55-60之间波动。CPU负载、后台进程、温度、甚至充电状态都会影响结果。

解决方案：

1. 每个场景跑3-5次取平均值
2. 测试时关闭不必要的后台应用
3. 不要在充电时跑性能测试（充电会影响CPU调度）
4. 设备温度过高时暂停测试

坑2：帧率采集的精度

UiTest框架的帧率采集精度取决于系统的vsync信号频率。60Hz屏幕的帧率采集精度是1fps，也就是说59fps和60fps之间的差异可能检测不到。

建议：帧率判断别卡得太死。55fps以上算合格，不要强求60fps。

坑3：响应时间的测量起点

"响应时间"从哪个时刻开始算？从用户点击屏幕？从onClick回调触发？从UI开始更新？

不同起点测出来的时间差异很大。建议统一标准：从click()调用开始，到目标组件出现为止。这个时间包含了事件分发、逻辑处理、UI更新全流程，最接近用户感知。

坑4：性能测试与功能测试混在一起

性能测试和功能测试的目标不同，不要混在一起跑。功能测试关注"对不对"，可以快速失败；性能测试关注"快不快"，需要完整跑完才能采集数据。

建议：性能测试单独一个测试套件，和功能测试分开执行。

坑5：基线数据过时

性能基线需要定期更新。随着功能增加，某些操作的耗时合理增长是正常的。如果基线半年不更新，测试就会频繁误报。

建议：每个版本发布前审核一次性能基线，确认是否需要调整。

HarmonyOS 6适配说明

HarmonyOS 6对性能测试做了以下增强：

1. GPU渲染分析：新增GPU渲染耗时采集，可以区分CPU瓶颈和GPU瓶颈
2. 帧耗时分布图：不仅提供平均帧率，还提供每帧的耗时分布，方便定位偶发卡顿
3. 内存快照对比：支持在测试过程中采集内存快照，对比前后差异，精确定位内存泄漏
4. 网络性能指标：新增接口响应时间、数据传输量等网络性能指标
5. 性能数据导出：支持将性能数据导出为JSON/CSV格式，方便集成到监控平台

迁移注意：startPerformanceRecord的参数从对象改为PerformanceRecordOptions类型，新增了sampleInterval字段控制采样间隔，默认100ms。

总结

性能测试的核心不是"测一次看结果"，而是"持续监控、基线对比、退化告警"。一次性的性能数据没有意义，只有和基线对比才能发现退化。

记住：性能测试不是锦上添花，是用户体验的底线保障。用户可以容忍功能少一点，但不会容忍卡顿。把性能测试纳入CI流水线，每次代码变更都跑一遍，性能退化零容忍。