HarmonyOS 鸿蒙Next数学类上架项目解析32-列表渲染性能与内存优化

列表性能问题的核心是减少不必要的渲染和内存占用。需要使用懒加载、虚拟列表、正确的key策略等优化手段。

1. 常见性能问题分析

// 问题1：没有使用唯一key，导致整个列表重新渲染

@Component
struct BadList {
  @State items: string[] = []

  build() {
    List() {
      // 错误：使用index作为key，删除/插入时会导致大量重渲染
      ForEach(this.items, (item: string, index: number) => {
        ListItem() {
          Text(item)
        }
      }, (item: string, index: number) => index.toString())  // 错误的key
    }
  }
}

// 问题2：列表项组件过于复杂

@Component
struct HeavyListItem {
  @Prop data: ComplexData

  build() {
    Column() {
      // 大量嵌套和计算，每次渲染都很耗时
      ForEach(this.data.subItems, (sub: SubItem) => {
        Row() {
          Image(sub.icon).width(50).height(50)
          Column() {
            Text(sub.title)
            Text(this.formatDate(sub.date))  // 每次渲染都计算
            Text(this.calculatePrice(sub))   // 每次渲染都计算
          }
        }
      })
    }
  }
}

// 问题3：一次性加载所有数据

@Component
struct LoadAllAtOnce {
  @State items: DataItem[] = []

  aboutToAppear(): void {
    // 一次性加载10000条数据，内存爆炸
    this.items = this.loadAllData()
  }
}

2. 使用LazyForEach实现懒加载

  //  数据源接口实现
class ListDataSource implements IDataSource {
  private data: DataItem[] = []
  private listeners: DataChangeListener[] = []

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

  totalCount(): number {
    return this.data.length
  }

  getData(index: number): DataItem {
    return this.data[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const index = this.listeners.indexOf(listener)
    if (index >= 0) {
      this.listeners.splice(index, 1)
    }
  }

  // 通知数据变化
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

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

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

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

  // 数据操作方法
  addData(item: DataItem): void {
    this.data.push(item)
    this.notifyDataAdd(this.data.length - 1)
  }

  deleteData(index: number): void {
    this.data.splice(index, 1)
    this.notifyDataDelete(index)
  }

  updateData(index: number, item: DataItem): void {
    this.data[index] = item
    this.notifyDataChange(index)
  }

  reloadData(newData: DataItem[]): void {
    this.data = newData
    this.notifyDataReload()
  }
}

interface DataItem {
  id: string
  title: string
  content: string
}

// 使用LazyForEach
@Entry
@Component
struct OptimizedList {
  private dataSource: ListDataSource = new ListDataSource([])

  aboutToAppear(): void {
    // 初始化数据
    const initialData: DataItem[] = []
    for (let i = 0; i < 10000; i++) {
      initialData.push({
        id: `item_${i}`,
        title: `标题 ${i}`,
        content: `内容 ${i}`
      })
    }
    this.dataSource = new ListDataSource(initialData)
  }

  build() {
    List() {
      // LazyForEach只渲染可见区域的项
      LazyForEach(this.dataSource, (item: DataItem) => {
        ListItem() {
          OptimizedListItem({ item: item })
        }
      }, (item: DataItem) => item.id)  // 使用唯一ID作为key
    }
    .width('100%')
    .height('100%')
    .cachedCount(5)  // 缓存前后5个项
  }
}

3. 列表项组件优化

 //优化的列表项组件
@Component
struct OptimizedListItem {
  @Prop item: DataItem

  // 缓存计算结果
  @State private formattedDate: string = ''

  aboutToAppear(): void {
    // 只在组件创建时计算一次
    this.formattedDate = this.formatDate(this.item.timestamp)
  }

  private formatDate(timestamp: number): string {
    const date = new Date(timestamp)
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
  }

  build() {
    Row() {
      // 使用固定尺寸，避免布局计算
      Column() {
        Text(this.item.title)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        Text(this.item.content)
          .fontSize(14)
          .fontColor('#666666')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .margin({ top: 4 })
        
        Text(this.formattedDate)
          .fontSize(12)
          .fontColor('#999999')
          .margin({ top: 4 })
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height(80)  // 固定高度，提升滚动性能
    .padding(12)
  }
}

interface DataItem {
  id: string
  title: string
  content: string
  timestamp: number
}

4. 分页加载

  //分页加载管理器
class PaginationManager {
  private pageSize: number = 20
  private currentPage: number = 0
  private hasMore: boolean = true
  private isLoading: boolean = false

  constructor(pageSize: number = 20) {
    this.pageSize = pageSize
  }

   // 加载下一页
  async loadNextPage(
    loadFn: (page: number, size: number) => Promise<DataItem[]>
  ): Promise<DataItem[]> {
    if (this.isLoading || !this.hasMore) {
      return []
    }
    
    this.isLoading = true
    
    try {
      const data = await loadFn(this.currentPage, this.pageSize)
      
      if (data.length < this.pageSize) {
        this.hasMore = false
      }
      
      this.currentPage++
      return data
    } finally {
      this.isLoading = false
    }
  }

   // 重置分页
  reset(): void {
    this.currentPage = 0
    this.hasMore = true
    this.isLoading = false
  }

   // 是否还有更多数据
  canLoadMore(): boolean {
    return this.hasMore && !this.isLoading
  }
}

@Entry
@Component
struct PaginatedList {
  @State items: DataItem[] = []
  @State isLoading: boolean = false
  @State hasMore: boolean = true
  private pagination: PaginationManager = new PaginationManager(20)

  aboutToAppear(): void {
    this.loadMore()
  }

  async loadMore(): Promise<void> {
    if (!this.pagination.canLoadMore()) return
    
    this.isLoading = true
    
    const newItems = await this.pagination.loadNextPage(
      async (page, size) => {
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 500))
        
        const items: DataItem[] = []
        const start = page  size
        for (let i = 0; i < size; i++) {
          items.push({
            id: `item_${start + i}`,
            title: `标题 ${start + i}`,
            content: `内容 ${start + i}`,
            timestamp: Date.now()
          })
        }
        return items
      }
    )
    
    this.items = [...this.items, ...newItems]
    this.hasMore = this.pagination.canLoadMore()
    this.isLoading = false
  }

  build() {
    List() {
      ForEach(this.items, (item: DataItem) => {
        ListItem() {
          OptimizedListItem({ item: item })
        }
      }, (item: DataItem) => item.id)
      
      // 加载更多指示器
      if (this.hasMore) {
        ListItem() {
          Row() {
            if (this.isLoading) {
              LoadingProgress().width(24).height(24)
              Text('加载中...').margin({ left: 8 })
            } else {
              Text('上拉加载更多')
            }
          }
          .width('100%')
          .height(50)
          .justifyContent(FlexAlign.Center)
        }
      }
    }
    .width('100%')
    .height('100%')
    .onReachEnd(() => {
      this.loadMore()
    })
  }
}

5. 列表项复用与缓存

  //图片缓存管理
class ImageCache {
  private static cache: Map<string, string> = new Map()
  private static maxSize: number = 100

  static get(url: string): string | undefined {
    return this.cache.get(url)
  }

  static set(url: string, data: string): void {
    // LRU策略：超出限制时删除最早的
    if (this.cache.size >= this.maxSize) {
      const firstKey = this.cache.keys().next().value
      this.cache.delete(firstKey)
    }
    this.cache.set(url, data)
  }

  static clear(): void {
    this.cache.clear()
  }
}

  //带缓存的列表项
@Component
struct CachedListItem {
  @Prop item: ItemWithImage
  @State imageLoaded: boolean = false

  aboutToAppear(): void {
    // 检查缓存
    const cached = ImageCache.get(this.item.imageUrl)
    if (cached) {
      this.imageLoaded = true
    }
  }

  build() {
    Row() {
      // 图片占位符
      Stack() {
        if (this.imageLoaded) {
          Image(this.item.imageUrl)
            .width(60)
            .height(60)
            .borderRadius(8)
        } else {
          Column()
            .width(60)
            .height(60)
            .backgroundColor('#f0f0f0')
            .borderRadius(8)
        }
      }
      
      Column() {
        Text(this.item.title)
          .fontSize(16)
        Text(this.item.subtitle)
          .fontSize(14)
          .fontColor('#666666')
      }
      .margin({ left: 12 })
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .padding(12)
  }
}

interface ItemWithImage {
  id: string
  title: string
  subtitle: string
  imageUrl: string
}

6. 虚拟滚动优化

/ 虚拟滚动列表 只渲染可见区域的项，大幅减少DOM节点 /

@Entry
@Component
struct VirtualScrollList {
  @State visibleItems: DataItem[] = []
  @State scrollOffset: number = 0

  private allItems: DataItem[] = []
  private itemHeight: number = 80
  private containerHeight: number = 600
  private bufferCount: number = 5

  aboutToAppear(): void {
    // 初始化大量数据
    for (let i = 0; i < 10000; i++) {
      this.allItems.push({
        id: `item_${i}`,
        title: `标题 ${i}`,
        content: `内容 ${i}`,
        timestamp: Date.now()
      })
    }
    this.updateVisibleItems()
  }

   //  计算可见项
  updateVisibleItems(): void {
    const startIndex = Math.max(0,
      Math.floor(this.scrollOffset / this.itemHeight) - this.bufferCount
    )
    const endIndex = Math.min(
      this.allItems.length,
      Math.ceil((this.scrollOffset + this.containerHeight) / this.itemHeight) + this.bufferCount
    )
    
    this.visibleItems = this.allItems.slice(startIndex, endIndex).map((item, index) => ({
      ...item,
      _virtualIndex: startIndex + index
    }))
  }

  build() {
    Scroll() {
      Column() {
        // 顶部占位
        Column()
          .height(this.getTopPadding())
        
        // 只渲染可见项
        ForEach(this.visibleItems, (item: DataItem & { _virtualIndex: number }) => {
          Row() {
            Text(item.title)
              .fontSize(16)
          }
          .width('100%')
          .height(this.itemHeight)
          .padding(12)
          .backgroundColor(item._virtualIndex % 2 === 0 ? '#ffffff' : '#f9f9f9')
        }, (item: DataItem) => item.id)
        
        // 底部占位
        Column()
          .height(this.getBottomPadding())
      }
    }
    .width('100%')
    .height(this.containerHeight)
    .onScroll((xOffset: number, yOffset: number) => {
      this.scrollOffset += yOffset
      this.updateVisibleItems()
    })
  }

  getTopPadding(): number {
    const startIndex = Math.max(0,
      Math.floor(this.scrollOffset / this.itemHeight) - this.bufferCount
    )
    return startIndex  this.itemHeight
  }

  getBottomPadding(): number {
    const endIndex = Math.min(
      this.allItems.length,
      Math.ceil((this.scrollOffset + this.containerHeight) / this.itemHeight) + this.bufferCount
    )
    return (this.allItems.length - endIndex)  this.itemHeight
  }
}

7. 性能监控

  //列表性能监控
class ListPerformanceMonitor {
  private renderTimes: number[] = []
  private scrollFPS: number[] = []
  private lastFrameTime: number = 0

   //记录渲染时间
  recordRenderTime(time: number): void {
    this.renderTimes.push(time)
    if (this.renderTimes.length > 100) {
      this.renderTimes.shift()
    }
  }

   //记录滚动帧率
  recordScrollFrame(): void {
    const now = Date.now()
    if (this.lastFrameTime > 0) {
      const fps = 1000 / (now - this.lastFrameTime)
      this.scrollFPS.push(fps)
      if (this.scrollFPS.length > 60) {
        this.scrollFPS.shift()
      }
    }
    this.lastFrameTime = now
  }
   //获取平均渲染时间
  getAverageRenderTime(): number {
    if (this.renderTimes.length === 0) return 0
    return this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length
  }

   //   获取平均帧率
  getAverageFPS(): number {
    if (this.scrollFPS.length === 0) return 0
    return this.scrollFPS.reduce((a, b) => a + b, 0) / this.scrollFPS.length
  }

      // 输出性能报告
  report(): void {
    console.info(`[性能报告] 平均渲染时间: ${this.getAverageRenderTime().toFixed(2)}ms`)
    console.info(`[性能报告] 平均帧率: ${this.getAverageFPS().toFixed(1)} FPS`)
  }
}

总结

列表渲染性能优化的关键点：

1. 使用LazyForEach实现懒加载，只渲染可见项
2. 使用唯一且稳定的key，避免不必要的重渲染
3. 列表项使用固定高度，提升滚动性能
4. 缓存计算结果，避免重复计算
5. 实现分页加载，避免一次性加载大量数据
6. 使用图片缓存，减少重复加载
7. 设置合适的cachedCount缓存数量
8. 监控性能指标，持续优化
9. 项目链接：https://gitee.com/solgull/math-fbox