鸿蒙-长列表优化

问题现象

使用ForEach和lazyForEach的对比

• 现象一：当同时加载1000条数据时，ForEach处于白屏加载状态，而lazyForEach会瞬间显示
• 现象二：当同时滚动列表数据时，ForEach会出现内容加载闪现，而lazyForEach流畅显示

提升性能和用户体验的四种手段

1. 懒加载：按需加载能力，解决加载长列表数据耗时长、占用过多资源的问题
2. 缓存列表项：提供屏幕可视区域外列表项长度的自定义调节能力，设置缓存列表项参数，提升列表滑动体验
3. 组件复用：提供可复用组件对象的缓存资源池，重复使用已创建过并缓存的组件对象，降低创建和销毁，提升组件渲染效率
4. 布局优化：使用扁平化布局方案，减少视图嵌套层数和组件数，避免过渡绘制，提升渲染效率

长列表优化的三个关键指标

1. 完全显示所用时间：生成具有完整内容的第一帧
2. 丢帧率：一个时间周期内的丢帧比率，harmonyOS系统要求每一帧要在11.1ms（90HZ刷新率）内绘制完成。部分丢帧肉眼无法感知，出现连续丢帧用户才会有明显感知
3. 独占内存：一个进程所占有的内存大小

懒加载

提供了两种渲染方式

方式1：循环渲染ForEach

适用于小数据量的渲染

数据源将全量挂载到组件树中，为每个元素进行绘制操作

方式2：数据懒加载LazyForEach

适用于大数据量的渲染

数据源将指定数量的数据源挂载到组件树中，为组件树中的元素进行绘制操作

缓存列表项

在使用LazyForEach懒加载时，当快速滚动列表数据时，会出现加载白屏问题，这是我们可以考虑使用缓存列表项进行实现。

缓存列表项设置上下缓冲区，我我们将指定的数据源挂载到组件树时，会将缓存数量的数据源一起挂载到组件树，当上下滚动时，将缓存的挂载项快速渲染，当渲染完后，进行下一轮数据渲染

设置cachedCount的个数

• 一般情况下，屏幕显示个数为n，我们可以将缓存数量设置为n/2个
• 当网络较差的情况下，我们可以将缓存数量设置为大于n/2
• 当有尺寸较大的图片或者视频的情况下，我们可以将缓存数量设置为小于n/2

组件复用

组件复用可以提升页面的加载速度和响应速度，我们将可以复用的UI项节点放入回收缓存区。当销毁一个UI项后，将销毁项的缓存节点进行复用，用于新UI项的渲染操作

复用步骤

1. 使用Reusable装饰器将组件标识为复用组件
2. 设置aboutToReuse生命周期回调函数，用于复用组件的数据填充
3. 为组件调用设置属性reuseId

布局优化

错误的布局方式会导致组件树和嵌套层数过多，在创建和绘制阶段会产生较大性能开销，导致页面卡顿。合理的使用布局可以减少嵌套层数，提高布局效率