鸿蒙 长列表加载性能优化

长列表加载性能优化

针对长列表加载这一场景,对列表渲染时间、页面滑动帧率、应用内存占用等方面带来优化,提升性能和用户体验的手段有如下 4 种:

  • 懒加载:提供列表数据按需加载能力,解决一次性加载长列表数据耗时长、占用过多资源的问题,可以提升页面响应速度。

  • 缓存列表项:提供屏幕可视区域外列表项长度的自定义调节能力,配合懒加载设置可缓存列表项参数,通过加载数据提升列表滑动体验。

  • 组件复用:提供可复用组件对象的缓存资源池,通过重复使用已经创建并缓存的组件对象,降低相同组件短时间内频繁创建和销毁的开销,提升组件渲染效率。

  • 布局优化:使用扁平化布局方案,减少视图嵌套层级和组件数,避免过度绘制,提升页面渲染效率。

详细说明:

LazyForEach 数据懒加载(数据量上百条的时候就可以考虑使用了)。LazyForEach 实现了按需加载针对列表数据量大、列表组件复杂的场景减少了页面首次启动时一次性加载数据的时间消耗减少了内存峰值

LazyForEach 懒加载可以通过设置 cachedCount 来指定缓存数量,在设置 cachedCount 后,除屏幕内显示的 ListItem 组件外,还会预先将屏幕可视区外指定数量的列表项数据缓存。这样当一个屏幕数据加载完成后,再次向下滑动时,会先加载上一次请求的数据,加载完成后再加载本次请求的数据。

ts 复制代码
@Component
Struct MyComponent {
  build() {
    list() {
      ...
      LazyForEach(...)
    }.cachedCount(n / 2)
  }
}

一般而言,缓存的 cachedCount=n/2(n 为一屏显示的列表数)的时候,效果较好。在实际开发中也要根据实际场景合理去设置缓存数量:

  • 例如列表项中需要显示网络数据,而网络数据加载较慢,为了提升列表信息的浏览效率和浏览体验,我们可以适当的多设置一些缓存数量(cachedCount 大于 n/2);
  • 如果列表中需要加载一些大图或者视频等,这些数据占用的内存较大,为了减少内存占用,我们需要适当减少缓存数量的设置(cachedCount 小于 n/2)。

因此,在实际场景中,需要不断尝试验证,设置适当的缓存数量,来达到体验和内存的平衡。

优化 3:组件复用

HarmonyOS 应用框架提供了组件复用能力,可复用组件从组件树上移除时,会进入到一个回收缓存区。后续创建新组件节点时,会复用缓存区中的节点,节约组件重新创建的时间。尤其在列表等场景下,其自定义子组件具有相同的组件布局结构,列表更新时仅有状态变量等数据差异。通过组件复用可以提高列表页面的加载速度和响应速度。

相关推荐
Jerry&Grj6 小时前
SpringBoot埋点功能技术实现方案深度解析:架构设计、性能优化与扩展性实践
java·微服务·性能优化·springboot·架构设计·埋点技术
大咖分享课6 小时前
架构性能优化三板斧:从10秒响应到毫秒级的演进之路
性能优化·架构
得物技术12 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
cpsvps_net13 小时前
代理连接性能优化:提升网络效率的关键技术与实践
网络·性能优化
老马啸西风13 小时前
v0.29.1 敏感词性能优化之内部类+迭代器内部类
性能优化·开源·nlp·github·敏感词
前端世界13 小时前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos
孤独的人14 小时前
WordPress 性能优化:从插件到 CDN 的全方位缓存设置指南
spring·缓存·性能优化
道一云黑板报14 小时前
Spark生态全景图:图计算与边缘计算的创新实践
大数据·性能优化·spark·边缘计算
子兮曰15 小时前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
EndingCoder16 小时前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge