鸿蒙 长列表加载性能优化

长列表加载性能优化

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

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

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

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

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

详细说明：

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

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

@Component
Struct MyComponent {
  build() {
    list() {
      ...
      LazyForEach(...)
    }.cachedCount(n / 2)
  }
}

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

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

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

优化 3：组件复用

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