HarmonyOS 长列表滚动性能优化：预渲染、离屏缓存与 GPU 合成策略

@Entry
@Component
structOptimizedListPage{
@StatedataSource:number[]=Array.from({length:1000},(_,i)=>i)

build(){
List(){
ForEach(this.dataSource,(item:number)=>{
ListItem(){
ComplexItem({index:item})
}
})
}
.cachedCount(5)//  增加缓存池大小
.width('100%')
.height('100%')
}
}

@Component
structComplexItem{
@Propindex:number

build(){
Row(){
Image($r('app.media.avatar'))
.width(50)
.height(50)
.margin({right:12})

Column(){
Text(`用户 ${this.index}`)
.fontSize(16)
.fontWeight(FontWeight.Bold)
Text(`这是第 ${this.index} 条动态内容，包含复杂布局和图片`)
.fontSize(14)
.fontColor(Color.Gray)
.maxLines(2)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
}
.padding(12)
.backgroundColor(Color.White)
.borderRadius(8)
.margin({left:12,right:12,top:6})
}
}

// 纹理缓存管理器
classTextureCache{
privatecache:Map<string,image.PixelMap>=newMap()

get(key:string):image.PixelMap|undefined{
returnthis.cache.get(key)
}

set(key:string,texture:image.PixelMap){
// 限制缓存大小，使用 LRU 策略
if(this.cache.size>50){
constfirstKey=this.cache.keys().next().value
this.cache.delete(firstKey)
}
this.cache.set(key,texture)
}
}

consttextureCache=newTextureCache()

@Component
structCachedListItem{
@Propindex:number
@StatecachedTexture:image.PixelMap|undefined=undefined

aboutToAppear(){
constcacheKey=`item_${this.index}`
constcached=textureCache.get(cacheKey)

if(cached){
this.cachedTexture=cached
}else{
// 首次渲染，渲染完成后缓存纹理
this.renderToTexture(cacheKey)
}
}

renderToTexture(key:string){
// 使用 NodeContainer 将组件渲染到离屏 Canvas
// 然后将 Canvas 转为 PixelMap 存入 textureCache
// （具体实现需要结合 ArkUI 的 NodeController API）
}

build(){
if(this.cachedTexture){
Image(this.cachedTexture)
.width('100%')
.height(80)
}else{
ComplexItem({index:this.index})
}
}
}

@Component
structAnimatedListItem{
@Stateliked:boolean=false
@Statescale:number=1

build(){
Row(){
Text('内容区域')
.layoutWeight(1)

Image($r('app.media.like'))
.width(24)
.height(24)
.scale({x:this.scale,y:this.scale})//  触发独立层
.onClick(()=>{
this.liked=!this.liked
animateTo({duration:300},()=>{
this.scale=this.liked?1.2:1
})
})
}
}
}

// ❌ 错误：使用索引作为 key
LazyForEach(this.dataSource,(item:Item,index:number)=>{
ListItem(){
Text(item.title)
}
},(item:Item,index:number)=>index.toString())// 索引会变化

// ✅ 正确：使用数据唯一标识
LazyForEach(this.dataSource,(item:Item)=>{
ListItem(){
Text(item.title)
}
},(item:Item)=>item.id)// 稳定的 ID

// ❌ 错误：每次 Build 都格式化
build(){
Text(this.formatDate(this.timestamp))
}

// ✅ 正确：在 aboutToAppear 中预计算
@StateformattedDate:string=''

aboutToAppear(){
this.formattedDate=this.formatDate(this.timestamp)
}

build(){
Text(this.formattedDate)
}