文章目录

在这里插入图片描述

每日一句正能量

“一杯敬过往，马不停蹄的奔忙；两杯敬当下，围炉夜话的灯光；三杯敬明日，万里无垠的宽广。”
奔忙曾是重负，此刻可敬；灯光是此夜的实景，寻常却温厚；明日尚未到来，先以宽广名之。时序流转，都在杯中。

导读

前文回顾：在上一篇《动画性能优化》中，我们深入探讨了HarmonyOS动画渲染管线、动画类型选择策略以及帧率监控调试方法。本文将聚焦列表渲染优化这一高频场景，从架构原理到实战落地，提供一套完整的性能调优方案。

一、引言：列表渲染为何是性能重灾区

在HarmonyOS应用开发中，列表（List/Grid/WaterFlow）是最常见的UI组件之一。无论是社交应用的消息列表、电商应用的商品瀑布流，还是新闻应用的资讯卡片，列表都承载着海量的数据展示需求。

然而，列表渲染也是性能问题的「重灾区」。开发者常遇到以下困境：

  • 长列表白屏：加载1000条数据时，首屏空白时间超过1秒；
  • 滚动严重卡顿：快速滑动时帧率跌至30fps以下，肉眼可见的掉帧；
  • 内存暴涨：列表页内存占用随数据量线性增长，导致应用被系统回收；
  • 图片闪烁错位：异步加载图片时，列表项出现内容闪烁或图片错位。

这些问题的根源在于对HarmonyOS列表渲染机制理解不足。本文将从架构原理、LazyForEach机制、组件复用、六大优化策略四个维度，系统性地解决列表渲染性能问题。

二、HarmonyOS列表渲染架构与数据流

2.1 列表渲染整体架构

HarmonyOS的列表渲染采用「数据源驱动 + 渲染引擎调度」的架构模式。理解这一架构，是优化的前提。

在这里插入图片描述

架构分层说明：

层级 核心组件 职责
数据源层 IDataSource、BasicDataSource 提供数据访问接口，支持数据变更通知
容器层 List、Grid、WaterFlow 定义布局规则，管理滚动视口
渲染引擎 ArkUI Diff算法、布局计算 对比前后状态，生成最小化渲染指令
GPU合成 图层混合、纹理渲染 将渲染指令转化为屏幕像素

数据流关键路径：

数据变更 → IDataSource通知 → 容器接收 → Diff算法对比 → 最小化DOM更新 → GPU渲染

2.2 三种列表容器的选择

HarmonyOS提供了三种列表容器，各有适用场景：

容器 布局特性 适用场景 性能特点
List 线性排列，支持垂直/水平 消息列表、设置页 布局计算简单，性能最优
Grid 网格排列，行列对齐 相册、应用图标 需计算行列位置，开销中等
WaterFlow 瀑布流，高度不齐 电商商品、资讯卡片 布局计算最复杂，需优化

选择建议：在性能敏感场景下，优先使用List；WaterFlow虽视觉效果丰富，但每行高度计算开销大，建议配合固定高度或预估高度使用。

三、ForEach vs LazyForEach：从「全量创建」到「按需渲染」

3.1 核心差异

ForEach和LazyForEach是HarmonyOS列表渲染的两种核心方式，它们的差异直接决定了列表的性能上限。

在这里插入图片描述

机制对比：

维度 ForEach LazyForEach
创建时机 一次性全量创建 按需创建，视口内渲染
内存占用 随数据量线性增长 与视口大小相关，恒定
首屏耗时 数据量越大越慢 基本恒定，约50ms
滚动帧率 快速滚动易掉帧 稳定在58-60fps
数据变更 全量重建 精准Diff，局部更新
适用场景 少量固定数据（<50项） 大量动态数据（>100项）

从对比数据可以看出，在1000项数据场景下，LazyForEach相比ForEach：

  • 内存占用降低87%（145MB → 18MB）
  • 首屏加载提升22倍（1150ms → 52ms）
  • 快速滚动帧率提升81%（32fps → 58fps）

3.2 LazyForEach 完整实现

LazyForEach的正确使用需要配合IDataSource接口。以下是一个生产级实现：

// ============================================
// 1. 定义数据模型
// ============================================
interface ProductItem {
  id: string
  name: string
  price: number
  imageUrl: string
  description: string
  tag: string
}

// ============================================
// 2. 实现 IDataSource 接口
// ============================================
class ProductDataSource implements IDataSource {
  private dataArray: ProductItem[] = []
  private listeners: DataChangeListener[] = []

  constructor(data: ProductItem[]) {
    this.dataArray = data
  }

  // 数据总量
  totalCount(): number {
    return this.dataArray.length
  }

  // 获取指定索引数据
  getData(index: number): ProductItem {
    return this.dataArray[index]
  }

  // 注册数据变更监听器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  // 注销数据变更监听器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }

  // ====== 数据操作方法（触发精准更新）======

  // 添加单条数据
  addData(index: number, data: ProductItem): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  // 删除单条数据
  deleteData(index: number): void {
    this.dataArray.splice(index, 1)
    this.notifyDataDelete(index)
  }

  // 批量添加
  addDatas(datas: ProductItem[]): void {
    const startIndex = this.dataArray.length
    this.dataArray.push(...datas)
    this.notifyDataAdd(startIndex)
  }

  // 重新加载数据
  reloadData(data: ProductItem[]): void {
    this.dataArray = data
    this.notifyDataReload()
  }

  // ====== 通知渲染引擎（精准Diff）======

  private notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  private notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  private notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }
}

// ============================================
// 3. 页面中使用 LazyForEach
// ============================================
@Entry
@Component
struct ProductListPage {
  // 模拟1000条商品数据
  @State dataSource: ProductDataSource = new ProductDataSource(
    Array.from({ length: 1000 }, (_, i) => ({
      id: `product_${i}`,
      name: `商品名称 ${i + 1}`,
      price: Math.floor(Math.random() * 1000) + 99,
      imageUrl: `https://example.com/image_${i}.jpg`,
      description: `这是商品 ${i + 1} 的详细描述信息`,
      tag: i % 3 === 0 ? '热销' : i % 3 === 1 ? '新品' : '特惠'
    }))
  )

  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('商品列表')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text(`共 ${this.dataSource.totalCount()} 件商品`)
          .fontSize(12)
          .fontColor('#999999')
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#FFFFFF')

      // 使用 LazyForEach 渲染列表
      List({ space: 12 }) {
        LazyForEach(this.dataSource, (item: ProductItem, index: number) => {
          ListItem() {
            this.ProductCard(item)
          }
          // 唯一键值，用于Diff算法精准定位
        }, (item: ProductItem, index: number) => item.id)
      }
      .width('100%')
      .layoutWeight(1)
      .padding(16)
      .backgroundColor('#F5F6FA')
      // cachedCount: 预加载边界项数量，平衡内存与流畅度
      .cachedCount(4)
      .edgeEffect(EdgeEffect.Spring)
      .scrollBar(BarState.Auto)
    }
    .width('100%')
    .height('100%')
  }

  // 商品卡片组件
  @Builder
  ProductCard(item: ProductItem) {
    Row() {
      // 商品图片（异步加载）
      Image(item.imageUrl)
        .width(100)
        .height(100)
        .borderRadius(8)
        .objectFit(ImageFit.Cover)
        // 占位图，避免空白闪烁
        .alt($r('app.media.placeholder'))

      Column() {
        Text(item.name)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Text(item.description)
          .fontSize(12)
          .fontColor('#666666')
          .margin({ top: 6 })
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Row() {
          Text(`¥ ${item.price}`)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#E17055')

          Text(item.tag)
            .fontSize(10)
            .fontColor('#FFFFFF')
            .backgroundColor(item.tag === '热销' ? '#E17055' : item.tag === '新品' ? '#00B894' : '#FDCB6E')
            .padding({ left: 8, right: 8, top: 2, bottom: 2 })
            .borderRadius(4)
        }
        .width('100%')
        .margin({ top: 8 })
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 12 })
    }
    .width('100%')
    .height(120)
    .padding(12)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

LazyForEach 关键要点：

  1. 必须实现唯一键值函数：(item, index) => item.id，这是Diff算法精准定位的基础；
  2. 使用cachedCount预加载：建议值3-5，过大浪费内存，过小滚动时可能白屏；
  3. 数据变更走通知接口：通过onDataAdd/onDataDelete等通知渲染引擎，避免全量重建。

四、组件复用池：@Reusable 深度实践

对于结构复杂的列表项（如包含图片、标签、按钮的电商卡片），即使使用LazyForEach，频繁的创建与销毁仍会带来GC压力。@Reusable装饰器通过组件复用池机制，彻底解决这一问题。

在这里插入图片描述

4.1 复用组件生命周期

@Reusable组件拥有特殊的生命周期：

生命周期 触发时机 职责
aboutToAppear 首次创建 初始化默认状态
aboutToReuse(params) 从复用池取出复用 更新数据，恢复UI状态
build 每次渲染 构建UI树
aboutToRecycle 滑出视口回收 清理资源，重置状态

4.2 生产级复用组件实现

// ============================================
// 可复用的复杂列表项组件
// ============================================
@Reusable
@Component
struct ProductCardReusable {
  // 状态变量（复用时更新）
  @State productId: string = ''
  @State productName: string = ''
  @State productPrice: number = 0
  @State productImage: string = ''
  @State productTag: string = ''
  @State isFavorite: boolean = false

  // 从复用池取出时调用，更新数据
  aboutToReuse(params: Record<string, Object>): void {
    this.productId = params.productId as string
    this.productName = params.productName as string
    this.productPrice = params.productPrice as number
    this.productImage = params.productImage as string
    this.productTag = params.productTag as string
    this.isFavorite = params.isFavorite as boolean
  }

  // 滑出视口回收时调用，清理状态
  aboutToRecycle(): void {
    // 重置状态，避免复用时显示旧数据
    this.productId = ''
    this.productName = ''
    this.productPrice = 0
    this.productImage = ''
    this.productTag = ''
    this.isFavorite = false
  }

  build() {
    Row() {
      // 商品图片
      Stack() {
        Image(this.productImage)
          .width(100)
          .height(100)
          .borderRadius(8)
          .objectFit(ImageFit.Cover)
          .alt($r('app.media.placeholder'))

        // 标签
        if (this.productTag !== '') {
          Text(this.productTag)
            .fontSize(10)
            .fontColor('#FFFFFF')
            .backgroundColor(this.getTagColor())
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(4)
            .position({ x: 4, y: 4 })
        }
      }
      .width(100)
      .height(100)

      Column() {
        Text(this.productName)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Text(`¥ ${this.productPrice}`)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#E17055')
          .margin({ top: 8 })

        Row() {
          Button(this.isFavorite ? '已收藏' : '收藏')
            .fontSize(12)
            .height(32)
            .backgroundColor(this.isFavorite ? '#E17055' : '#F5F6FA')
            .fontColor(this.isFavorite ? '#FFFFFF' : '#2D3436')
            .onClick(() => {
              this.isFavorite = !this.isFavorite
              // 触发收藏逻辑
              this.handleFavorite()
            })
        }
        .margin({ top: 8 })
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 12 })
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height(120)
    .padding(12)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }

  private getTagColor(): ResourceColor {
    switch (this.productTag) {
      case '热销': return '#E17055'
      case '新品': return '#00B894'
      case '特惠': return '#FDCB6E'
      default: return '#B2BEC3'
    }
  }

  private handleFavorite(): void {
    // 收藏逻辑处理
    console.info(`[ProductCard] 收藏状态变更: ${this.productId} -> ${this.isFavorite}`)
  }
}

// ============================================
// 在页面中使用复用组件
// ============================================
@Entry
@Component
struct ReusableProductList {
  private dataSource: ProductDataSource = new ProductDataSource(
    Array.from({ length: 2000 }, (_, i) => ({
      id: `product_${i}`,
      name: `商品 ${i + 1}`,
      price: Math.floor(Math.random() * 2000) + 99,
      imageUrl: `https://example.com/img_${i}.jpg`,
      tag: ['热销', '新品', '特惠', ''][i % 4],
      isFavorite: i % 7 === 0
    }))
  )

  build() {
    List({ space: 12 }) {
      LazyForEach(this.dataSource, (item: ProductItem, index: number) => {
        ListItem() {
          // 使用复用组件
          ProductCardReusable({
            productId: item.id,
            productName: item.name,
            productPrice: item.price,
            productImage: item.imageUrl,
            productTag: item.tag,
            isFavorite: item.isFavorite
          })
        }
      }, (item: ProductItem, index: number) => item.id)
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .cachedCount(3)
  }
}

@Reusable 使用要点：

  1. 必须实现aboutToReuse：这是复用时更新数据的核心入口；
  2. 建议实现aboutToRecycle：清理状态和资源，避免数据残留；
  3. 状态变量用@State：确保复用时能正确响应数据变更；
  4. 避免在aboutToReuse中执行耗时操作：保持轻量，否则复用本身会成为瓶颈。

五、六大优化策略全景

列表渲染优化不是单一技术的应用，而是多策略协同的结果。

在这里插入图片描述

5.1 策略一：LazyForEach 按需创建

已在前文详细阐述，核心原则是「可见即渲染，不可见即回收」。

5.2 策略二：组件复用 @Reusable

已在前文详细阐述，核心原则是「避免频繁创建销毁，降低GC压力」。

5.3 策略三：预加载策略 cachedCount

cachedCount控制视口边界外预加载的列表项数量。合理设置可以消除滚动白屏，但过大则会浪费内存。

// cachedCount 调优示例
List() {
  LazyForEach(this.dataSource, (item, index) => {
    ListItem() { /* ... */ }
  })
}
// 低端设备：cachedCount = 2（节省内存）
// 中端设备：cachedCount = 4（平衡方案）
// 高端设备：cachedCount = 6（极致流畅）
.cachedCount(this.getOptimalCacheCount())

private getOptimalCacheCount(): number {
  // 根据设备性能动态调整
  const deviceInfo = deviceInfo
  if (deviceInfo.memorySize < 4 * 1024 * 1024 * 1024) {  // < 4GB
    return 2
  } else if (deviceInfo.memorySize < 8 * 1024 * 1024 * 1024) {  // < 8GB
    return 4
  } else {
    return 6
  }
}

5.4 策略四：布局扁平化

深层嵌套的布局树会显著增加布局计算耗时。列表项应尽可能扁平化。

// ❌ 不推荐：深层嵌套
Column() {
  Row() {
    Column() {
      Row() {
        Image()  // 图片
        Column() {
          Text()  // 标题
          Text()  // 描述
        }
      }
    }
  }
}

// ✅ 推荐：扁平化布局
Row() {
  Image()    // 图片
  Column() {
    Text()   // 标题
    Text()   // 描述
  }
}

布局优化 checklist：

  • 列表项布局层级不超过3层
  • 使用layoutWeight替代固定尺寸
  • 固定列表项高度，避免动态测量
  • 避免在列表项中使用Stack叠加过多子组件

5.5 策略五：异步加载

图片解码和数据处理是列表渲染的两大耗时操作，必须异步化。

// 图片异步加载 + 占位图
Image(item.imageUrl)
  .width(100)
  .height(100)
  .alt($r('app.media.placeholder'))  // 占位图
  .objectFit(ImageFit.Cover)
  .syncLoad(false)  // 异步加载（默认）

// 大数据处理移至Worker线程
import worker from '@ohos.worker'

const listWorker = new worker.ThreadWorker('entry/ets/workers/ListDataWorker.ts')

// 主线程发送数据处理请求
listWorker.postMessage({ action: 'process', data: rawData })

// Worker线程处理完成后返回
listWorker.onmessage = (e) => {
  const processedData = e.data
  this.dataSource.reloadData(processedData)
}

5.6 策略六：Diff算法优化

Diff算法的效率取决于键值的唯一性和稳定性。

// ❌ 不推荐：使用索引作为键值
LazyForEach(dataSource, (item, index) => {
  ListItem() { /* ... */ }
}, (item, index) => index.toString())  // 数据变更时键值变化，导致全量重建

// ✅ 推荐：使用业务唯一ID作为键值
LazyForEach(dataSource, (item, index) => {
  ListItem() { /* ... */ }
}, (item, index) => item.id)  // 键值稳定，Diff精准高效

六、实战案例：电商商品列表从卡顿到丝滑

6.1 问题描述

某电商应用商品列表页，数据量约2000条，存在以下问题：

  • 首屏加载时间：2.3秒
  • 快速滚动帧率：28fps（严重掉帧）
  • 内存占用：380MB（OOM风险）
  • 图片加载闪烁明显

6.2 优化方案实施

步骤一：ForEach → LazyForEach 替换

// 优化前：ForEach 全量创建
ForEach(this.products, (item: ProductItem) => {
  ListItem() { this.ProductCard(item) }
})

// 优化后：LazyForEach 按需创建
LazyForEach(this.dataSource, (item: ProductItem, index: number) => {
  ListItem() { this.ProductCard(item) }
}, (item: ProductItem, index: number) => item.id)

步骤二：启用组件复用

将ProductCard改造为@Reusable组件，实现aboutToReuse和aboutToRecycle。

步骤三：布局扁平化

将列表项从5层嵌套压缩至3层，使用layoutWeight替代固定宽度。

步骤四：图片异步优化

添加占位图，设置合理的缓存策略。

步骤五：cachedCount 调优

根据设备内存动态设置预加载数量。

6.3 优化效果

指标 优化前 优化后 提升幅度
首屏加载 2300ms 85ms 27x
快速滚动帧率 28fps 59fps 111%
内存占用 380MB 45MB 88%
图片闪烁 严重 无 完全消除

七、性能监控与调试

7.1 使用SmartPerf分析列表性能

# 采集列表滚动过程中的性能trace
hdc shell smartperf trace -b 20480 -t 10 -o /data/local/tmp/list_scroll.ftrace

# 关键分析维度：
# 1. FrameTimeline: 检查每帧是否超过16.6ms预算
# 2. Layout Time: 列表项布局计算耗时
# 3. GPU Time: 纹理渲染与合成耗时
# 4. Memory: 列表滚动过程中的内存波动

7.2 列表性能诊断Checklist

检查项 诊断方法 优化方向
是否使用LazyForEach？ 代码审查 ForEach → LazyForEach
键值是否唯一稳定？ 日志打印键值 使用业务ID替代索引
布局层级是否过深？ SmartPerf布局耗时 扁平化至3层以内
图片是否异步加载？ 网络抓包 + 帧率分析 添加占位图 + 异步解码
cachedCount是否合理？ 内存监控 + 白屏测试 根据设备动态调整
是否启用组件复用？ 代码审查 @Reusable + aboutToReuse

八、总结与最佳实践

本文从HarmonyOS列表渲染架构出发，系统阐述了从「全量创建」到「按需渲染」的性能跃迁路径。以下是核心最佳实践：

8.1 列表渲染黄金法则

  1. 数据量 > 50 必用 LazyForEach：这是列表性能优化的底线；
  2. 复杂项必加 @Reusable：结构超过3个组件的列表项，启用复用；
  3. 键值必须唯一稳定：使用业务ID，绝不用索引；
  4. 布局扁平化：列表项层级控制在3层以内；
  5. 图片异步 + 占位图：消除解码阻塞和视觉闪烁；
  6. cachedCount 动态调优：根据设备内存分级设置。

8.2 性能优化优先级

P0（必做）: LazyForEach + 唯一键值
P1（重要）: @Reusable 组件复用
P2（推荐）: 布局扁平化 + 异步图片
P3（进阶）: cachedCount 动态调优 + Worker线程

8.3 写在最后

列表渲染优化是HarmonyOS应用性能调优的「必修课」。从ForEach到LazyForEach的转变，不仅是API的替换，更是开发思维的升级——从「全量思维」到「按需思维」。

随着HarmonyOS API版本的不断演进，列表渲染引擎在Diff算法、组件复用、预加载策略等方面持续优化。作为开发者，我们既要掌握当前的最佳实践，也要关注框架的新特性，持续打磨应用的列表体验，让用户在每一次滑动中都能感受到鸿蒙系统的丝滑流畅。

转载自：https://blog.csdn.net/u014727709/article/details/163862115
欢迎 👍点赞✍评论⭐收藏，欢迎指正

Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙车机手机协同服务生态

avatar 人工智能6S服务平台
cover

鸿蒙负一屏场景入口与服务推荐

avatar 人工智能6S服务平台

产线数字化终端怎么选品牌？七维选型方法与品牌对比

七维评估框架（防护/算力/连接/形态/续航/采集/安全）逐项考量，五步决策路径（形态→OS→需求→环境→预算）逐步收敛。亿道信息在产品线完整度（手持+工位机+嵌入式全覆盖）和AI算力（M10L 40 TOPS）上占优，雷盾在全国产化（鸿蒙+瑞芯微）和模块化扩展上有独到之处。西门子在PLC生态无缝接入上是标杆，研华在极端环境长期稳定性上领先，Zebra和Honeywell在扫码生态和传感器领域专业度

avatar 人工智能6S服务平台