性能优化与调试

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)

布局层级优化

深层嵌套的布局是帧率问题的常见来源。ArkUI 每增加一层容器，布局阶段的 Measure 计算量就增加一倍。以下是常见的布局扁平化技巧：

// ❌ 过度嵌套：4层容器只为了居中一个文字
Column() {
  Row() {
    Stack() {
      Column() {
        Text('hello')
      }
    }
  }
}

// ✅ 扁平化：直接在 Column 上使用 alignItems 和 justifyContent
Column() {
  Text('hello')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)

// 复杂多列布局用 RelativeContainer 代替嵌套 Row/Column
// RelativeContainer 允许子组件相对定位，只需一层容器
RelativeContainer() {
  Image(this.article.cover)
    .id('cover')
    .width(120)
    .height(90)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
  Text(this.article.title)
    .id('title')
    .fontSize(14)
    .alignRules({
      // 在封面右侧显示，与封面顶部对齐
      top: { anchor: 'cover', align: VerticalAlign.Top },
      left: { anchor: 'cover', align: HorizontalAlign.End }
    })
    .margin({ left: 12 })
}

内存泄漏排查

内存泄漏在长时间运行的应用中会导致 OOM（内存不足）崩溃。ArkTS 中常见的内存泄漏模式：

// 正确的资源清理模式
@Component
struct LiveUpdateCard {
  @State price: number = 0
  private timer: number = -1
  private unsubscribe?: () => void

  aboutToAppear() {
    // 注册定时器
    this.timer = setInterval(() => {
      this.price = Math.random() * 100
    }, 1000)

    // 注册 AppStorage 变化监听
    const onStockUpdate = () => {
      this.price = AppStorage.get<number>('stockPrice') ?? 0
    }
    AppStorage.setAndLink('stockPrice', 0).on('change', onStockUpdate)
    // 保存取消订阅函数
    this.unsubscribe = () => {
      AppStorage.setAndLink('stockPrice', 0).off('change', onStockUpdate)
    }
  }

  aboutToDisappear() {
    // 必须清理定时器！否则组件销毁后定时器继续持有 this 引用
    if (this.timer !== -1) {
      clearInterval(this.timer)
      this.timer = -1
    }
    // 必须取消订阅！
    this.unsubscribe?.()
  }

  build() {
    Text(`¥${this.price.toFixed(2)}`)
  }
}