
HarmonyOS NEXT应用元服务布局优化长列表使用懒加载与组件复用
在列表场景下会采用List、Grid、WaterFlow等组件配合ForEach或者LazyForEach来实现,ForEach适合内容长度确定,内容在两屏以内的列表。LazyForEach适合长度超过两屏的列表情况,并且当内容布局相对固定的情况下,配合组件复用的方式来减少滑动过程中的组件创建。在长列表加载性能优化中,介绍了较为详细的实践案例,这里我们仅引用一些关键性能收益数据。
懒加载
针对长列表这一场景,在本地模拟了10、100、1000、10000条数据,分别使用ForEach、LazyForEach,来测试关闭和开启懒加载情况下的完全显示所用时间、列表挂载时间、独占内存,并分析了其滑动过程中的丢帧率。其中,列表挂载时间是指创建组件和组件挂载数据的总时长。最终,使用DevEco Studio的Profiler工具检测下述指标,得到的数据如下所示:
从测试数据可以看出:
1.在100条数据范围内ForEach和LazyForEach差距不大,总体而言两者各项性能指标都在可接受范围内,而ForEach代码逻辑比LazyForEach简单,此场景下使用ForEach即可。
2.当数据大于1000条,特别是当数据达到10000条时,ForEach在列表渲染、应用内存占用、丢帧率等各个方面都会有“指数级别”的显著劣化,滑动会出现明显的卡顿,甚至会出现应用crash等现象。
3.使用LazyForEach除了最后内存稍微增大以外,其列表渲染时间、丢帧率都不会出现明显变化,具有较好的性能。
组件复用
对于使用LazyForEach的情况下,在滑动过程中由于要动态创建组件,会出现BuildLazyItem的耗时,通过组件复用能力,可以减少滑动过程中的组件创建耗时,而组件复用BuildRecycle耗时极短,进一步优化滑动时的性能。
对比长列表案例中开启组件复用和未开启的情况下,其数据如下
可以发现列表滑动时丢帧率明显降低,这是因为,List列表开启了组件复用,不会执行BuildLazyItem这个耗时操作,后续创建新组件节点时,会直接复用缓存区中的节点,这样就大幅节约了组件重新创建的时间。
本文主要引用整理于鸿蒙官方文档
