性能优化

概述

本文档提供了 HCompass 应用的性能优化建议和最佳实践。

布局优化

1. 避免深度嵌套

// 不推荐：深度嵌套
Column() {
  Row() {
    Column() {
      Row() {
        Column() {
          Text("内容");
        }
      }
    }
  }
}

// 推荐：扁平化布局
Column() {
  Text("内容");
}

2. 使用 layoutWeight

// 推荐
Row() {
  Text("左侧").layoutWeight(1);
  Text("右侧").layoutWeight(1);
}

// 不推荐
Row() {
  Text("左侧").width("50%");
  Text("右侧").width("50%");
}

3. 使用 renderGroup

对于包含复杂子组件的动画，使用 renderGroup：

Column() {
  // 复杂内容
}
.renderGroup(true)

动画优化

1. 避免频繁改变布局属性

// 不推荐：频繁改变布局属性
animateTo({ duration: 300 }, () => {
  this.width = 200;  // 影响性能
  this.height = 200;
});

// 推荐：使用 transform
animateTo({ duration: 300 }, () => {
  this.scale = 1.2;  // 性能更好
});

2. 使用 opacity 而不是显示/隐藏

// 推荐
Column() {
  // ...
}
.opacity(this.isVisible ? 1 : 0)

// 不推荐
if (this.isVisible) {
  Column() {
    // ...
  }
}

列表优化

1. 使用 LazyForEach

// 推荐：懒加载
List() {
  LazyForEach(this.dataSource, (item: Item) => {
    ListItem() {
      ItemComponent({ item: item });
    }
  });
}

// 不推荐：一次性加载
List() {
  ForEach(this.dataList, (item: Item) => {
    ListItem() {
      ItemComponent({ item: item });
    }
  });
}

2. 使用 cachedCount

List() {
  // ...
}
.cachedCount(3)  // 缓存 3 个列表项

3. 使用分页加载

@ObservedV2
export class MyListViewModel extends BaseNetWorkListViewModel<Item> {
  constructor() {
    super();
    this.pageSize = 20;  // 每页 20 条
  }
}

图片优化

1. 使用合适的图片格式

• JPEG：照片
• PNG：图标、透明图片
• WebP：更小的文件大小

2. 使用图片缓存

Image(url)
  .objectFit(ImageFit.Cover)
  .syncLoad(false)  // 异步加载

3. 压缩图片

使用工具压缩图片，减小文件大小。

网络优化

1. 使用请求缓存

const response = await this.httpClient.get("/api/data", {
  cache: true,
  cacheTime: 5 * 60 * 1000  // 缓存 5 分钟
});

2. 使用分页

对于大量数据，使用分页加载：

const response = await this.httpClient.get("/api/list", {
  params: {
    page: 1,
    pageSize: 20
  }
});

状态管理优化

1. 避免频繁更新

// 不推荐
for (let i = 0; i < 1000; i++) {
  this.count++;  // 每次都会触发 UI 更新
}

// 推荐
let newCount = this.count;
for (let i = 0; i < 1000; i++) {
  newCount++;
}
this.count = newCount;  // 只触发一次 UI 更新

2. 使用计算属性

@ObservedV2
export class MyViewModel {
  @Trace dataList: Item[] = [];

  get totalPrice(): number {
    return this.dataList.reduce((sum, item) => sum + item.price, 0);
  }
}

内存优化

1. 及时清理资源

aboutToDisappear(): void {
  // 清理定时器
  clearInterval(this.timer);

  // 取消网络请求
  this.controller.abort();

  // 清理监听器
  this.removeListener();
}

2. 避免内存泄漏

// 不推荐：闭包导致内存泄漏
setInterval(() => {
  this.updateData();  // this 引用导致内存泄漏
}, 1000);

// 推荐：使用箭头函数或及时清理
this.timer = setInterval(() => {
  this.updateData();
}, 1000);

aboutToDisappear(): void {
  clearInterval(this.timer);
}

构建优化

1. 使用生产模式构建

hvigorw assembleHap -p product=default --mode release

2. 启用代码压缩

在 build-profile.json5 中启用代码压缩：

{
  "buildOption": {
    "arkOptions": {
      "obfuscation": {
        "enable": true
      }
    }
  }
}

性能监控

1. 使用性能分析工具

使用 DevEco Studio 的性能分析工具监控应用性能。

2. 监控关键指标

• 启动时间：应用启动到首屏显示的时间
• 页面加载时间：页面加载到内容显示的时间
• 内存使用：应用的内存占用
• CPU 使用：应用的 CPU 占用

最佳实践

1. 延迟加载

对于非关键资源，使用延迟加载：

aboutToAppear(): void {
  // 立即加载关键数据
  this.loadCriticalData();

  // 延迟加载非关键数据
  setTimeout(() => {
    this.loadNonCriticalData();
  }, 1000);
}

2. 预加载

对于即将使用的资源，使用预加载：

// 预加载下一页数据
if (this.currentPage < this.totalPages) {
  this.preloadNextPage();
}

3. 虚拟滚动

对于超长列表，使用虚拟滚动：

List() {
  LazyForEach(this.dataSource, (item: Item) => {
    ListItem() {
      ItemComponent({ item: item });
    }
  });
}
.height("100%")

注意事项

1. 测试性能：在真机上测试性能
2. 持续优化：定期检查和优化性能
3. 平衡取舍：在性能和功能之间找到平衡

下一步

• 代码规范 - 了解代码规范
• 状态管理 - 了解状态管理