鸿蒙 长列表加载性能优化

长列表加载性能优化

针对长列表加载这一场景,对列表渲染时间、页面滑动帧率、应用内存占用等方面带来优化,提升性能和用户体验的手段有如下 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 应用框架提供了组件复用能力,可复用组件从组件树上移除时,会进入到一个回收缓存区。后续创建新组件节点时,会复用缓存区中的节点,节约组件重新创建的时间。尤其在列表等场景下,其自定义子组件具有相同的组件布局结构,列表更新时仅有状态变量等数据差异。通过组件复用可以提高列表页面的加载速度和响应速度。

相关推荐
黑马金牌编程13 小时前
简易分析慢 SQL 的流程和方法
linux·数据库·mysql·性能优化·性能分析·慢日志
杨杨杨大侠16 小时前
Atlas Mapper 教程系列 (8/10):性能优化与最佳实践
java·spring boot·spring·性能优化·架构·系统架构
猫林老师16 小时前
HarmonyOS 5 性能优化全攻略:从启动加速到内存管理
华为·性能优化·harmonyos
卓码软件测评19 小时前
第三方软件测试机构:Appium如何使用Selenium的客户端库?
功能测试·selenium·测试工具·性能优化·appium
wayne2141 天前
React Native启动性能优化实战:Hermes + RAM Bundles + 懒加载
react native·react.js·性能优化
文人sec1 天前
性能测试-jmeter15-性能项目计划流
分布式·jmeter·性能优化·grafana·prometheus·模块测试
UWA1 天前
游戏在高负载场景下,整机功耗控制在多少
游戏·unity·性能优化·游戏开发
武子康1 天前
Java-136 深入浅出 MySQL Spring Boot @Transactional 使用指南:事务传播、隔离级别与异常回滚策略
java·数据库·spring boot·mysql·性能优化·系统架构·事务
roman_日积跬步-终至千里2 天前
【软件架构设计(40)】数据库规范化与性能优化
数据库·oracle·性能优化
一个天蝎座 白勺 程序猿2 天前
Oracle与Kingbase深度兼容体验:从连接配置到性能优化全解析
数据库·oracle·性能优化·kingbase·金仓数据库