性能优化与调试

HarmonyOS 渲染管线

要做性能优化，首先要理解 ArkUI 的渲染流程。当状态变化触发 UI 更新时，框架会经历以下阶段：

LazyForEach — 列表懒加载

普通 ForEach 会一次性渲染所有数据项，当列表有几千条数据时，会导致严重的首帧卡顿和内存占用。LazyForEach 只渲染当前可见区域的项目（加上前后少量缓冲），滚动时动态创建和销毁视图，是处理大列表的必选方案：

import { BasicDataSource, DataChangeListener } from '@kit.ArkUI'

// 实现 IDataSource 接口，为 LazyForEach 提供数据
class ArticleDataSource implements IDataSource {
  private list: Article[] = []
  private listeners: DataChangeListener[] = []

  constructor(data: Article[]) {
    this.list = data
  }

  // IDataSource 必须实现的方法
  totalCount(): number {
    return this.list.length
  }

  getData(index: number): Article {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener) {
    this.listeners.push(listener)
  }

  unregisterDataChangeListener(listener: DataChangeListener) {
    this.listeners = this.listeners.filter(l => l !== listener)
  }

  // 追加数据（如加载下一页）
  appendData(newItems: Article[]) {
    const start = this.list.length
    this.list = [...this.list, ...newItems]
    // 通知 LazyForEach 有新数据插入
    this.listeners.forEach(l => {
      l.onDataAdd(start)
    })
  }

  // 更新单项数据
  updateItem(index: number, newItem: Article) {
    this.list[index] = newItem
    this.listeners.forEach(l => l.onDataChange(index))
  }

  // 删除单项
  deleteItem(index: number) {
    this.list.splice(index, 1)
    this.listeners.forEach(l => l.onDataDelete(index))
  }
}

@Entry
@Component
struct ArticleList {
  private dataSource: ArticleDataSource = new ArticleDataSource([])
  @State isLoading: boolean = false
  @State page: number = 1

  aboutToAppear() {
    this.loadPage(1)
  }

  async loadPage(pageNum: number) {
    if (this.isLoading) return
    this.isLoading = true
    const newData = await apiClient.get<Article[]>(`/articles?page=${pageNum}`)
    this.dataSource.appendData(newData)
    this.isLoading = false
  }

  build() {
    List({ space: 12 }) {
      // LazyForEach：只渲染可见的列表项！
      LazyForEach(this.dataSource, (item: Article) => {
        ListItem() {
          ArticleCard({ article: item })
        }
      }, (item: Article) => item.id.toString())
      // 第三个参数：key 生成器，保证 key 唯一且稳定
      // 用 id 而不是 index，避免删除/插入时错误复用
    }
    .width('100%')
    .height('100%')
    .cachedCount(3)   // 可见区域上下各缓存 3 个，预防滚动白屏
    .onReachEnd(() => {
      // 滚动到底部，加载下一页
      this.page++
      this.loadPage(this.page)
    })
  }
}

组件缓存：@Reusable

当列表中的复杂组件频繁创建/销毁时，可以用 @Reusable 装饰器标记组件为可复用。框架会维护一个组件缓存池，新的列表项优先从缓存池取出复用，而不是重新创建：

// @Reusable 标记组件可复用（放入缓存池）
@Reusable
@Component
struct ArticleCard {
  @State article: Article = {} as Article

  // 组件从缓存池取出并将要展示新数据时调用
  // 必须在此处更新状态，让 UI 显示新数据
  aboutToReuse(params: Record<string, ESObject>) {
    this.article = params['article'] as Article
  }

  // 组件即将放入缓存池（不销毁，等待复用）
  aboutToRecycle() {
    console.log('组件进入缓存池')
    // 可以在此处取消图片加载等耗时操作
  }

  build() {
    Column({ space: 8 }) {
      Image(this.article.coverUrl)
        .width('100%')
        .height(180)
        .objectFit(ImageFit.Cover)
        .borderRadius({ topLeft: 10, topRight: 10 })

      Text(this.article.title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .padding({ left: 12, right: 12 })
    }
    .backgroundColor('#1c2128')
    .borderRadius(10)
  }
}

避免不必要的重渲染

状态管理不当会导致大量不必要的重渲染，这是性能问题的首要来源：

// ❌ 错误：将大对象放入 @State，任何属性变化都重绘整个组件
@State appData: {
  user: User
  articles: Article[]
  settings: Settings
  cart: CartItem[]
} = ...
// 修改 cart 会导致依赖 user/articles 的 UI 也重渲染

// ✅ 正确：拆分状态，每个组件只依赖需要的最小状态
@State user: User = ...
@State articles: Article[] = ...
@State cartCount: number = 0    // 购物车只关心数量，不需要完整列表

// ❌ 错误：在 build() 中创建新对象
build() {
  MyComponent({
    config: { fontSize: 16, color: '#fff' }  // 每次 build 都创建新对象！
  })
}

// ✅ 正确：将配置提升为组件级变量
private readonly config = { fontSize: 16, color: '#fff' }  // 只创建一次
build() {
  MyComponent({ config: this.config })
}

图片性能优化

// Image 组件性能最佳实践
Image(this.article.coverUrl)
  // 必须设置明确的宽高！框架提前知道尺寸，避免布局重排
  .width(120)
  .height(90)
  // 按显示区域缩放（不加载原始超清图到内存）
  .syncLoad(false)     // 异步加载（默认），不阻塞 UI 线程
  // 为离屏图片保留缓存（滚动时不重新解码）
  .objectFit(ImageFit.Cover)
  // 加载占位图（避免空白闪烁）
  .onError(() => {
    // 加载失败时的回调
  })
  .onComplete((msg) => {
    // 加载成功回调
  })

// 网格图片场景：用 cachedCount 预缓存
Grid() {
  LazyForEach(this.imageSource, ...)
}
.cachedCount(6)  // 提前缓存当前视口外 6 个图片

启动优化

应用启动时间分为两部分：冷启动（进程不存在，从零启动）和温启动（进程已存在，从后台恢复）。优化冷启动最关键：

DevEco Profiler 性能分析

DevEco Studio 内置了强大的 Profiler 工具，是分析性能瓶颈的核心手段：

使用 Profiler 分析掉帧

// 在代码中插入性能打点，方便在 Profiler 中定位
import hiTraceMeter from '@ohos.hiTraceMeter'

async loadHeavyData() {
  // 开始性能跟踪段
  hiTraceMeter.startTrace('loadHeavyData', 1)

  const data = await heavyOperation()

  // 结束跟踪段
  hiTraceMeter.finishTrace('loadHeavyData', 1)
  return data
}

// 将耗时计算移到 TaskPool（Worker 线程）避免阻塞 UI
import taskpool from '@ohos.taskpool'

// 标注为可在线程池执行的任务
@Concurrent
function processLargeArray(data: number[]): number {
  // 这段代码在 Worker 线程执行，不阻塞 UI
  return data.reduce((sum, n) => sum + n, 0)
}

// 在 UI 线程中调用，但不阻塞
const task = new taskpool.Task(processLargeArray, largeArray)
const result = await taskpool.execute(task)
console.log('计算结果（不卡 UI）:', result)