鸿蒙开发第3篇__大数据量的列表加载性能优化

列表 是最常用到的组件

一 ForEach

渲染控制语法————Foreach
Foreach的作用

• 遍历数组项，并创建相同的布局组件块
• 在组件加载时， 将数组内容数据全部创建对应的组件内容， 渲染到页面上

const swiperImage: Resource[] ={
	$r("app.media.ic_home"),
	$r("app.media.ic_coupons"),
	$r('app.media.ic_internal_price')
};
Swiper(){
	Foreach(swiperImage, (item: Resource) =>{
		Image(item)
		  .width("100%")
		  ...
	}, (item: Resource) => JSON.stringify(item))
}

二. LazyForEach

渲染控制语法 ————LazyForeach

• 使用 LazyForeach时，框架会根据滚动容器可视区域按需创建组件， 当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用， 提高首次加载的速度
• 不可滚动容器使用LazyForeach， 其会退化为Foreach， 全部创建内容
• 使用的数据源需要继承 IDatasource 接口

WaterFlow(){
	LazyForEach(this.datasource, (item: ProductBean) =>{
		FlowItem(){
			FlowItemComponent({item: item})
		}
	}, (item: ProductBean) => JSON.stringify(item))
}

三 List列表

List 支持懒加载能力

List(){
	ForEach(mainViewModel.getSettingListData(),
	(item: ItemData) =>{
		ListItem(){
		  this.settingCell(item)
		}
	},item => item.toString())
}.divider({...})

四 Grid网格布局

实现二维布局， 可以根据rowsTemplate, columnTemplate 设置行数和列数

 Grid(){
	ForEach(mainViewModel.getFirstGridData(),
		(item: ItemData) =>{
				GridItem(){
						Column(){
								Image(item.img)
								Text(item.title)
						}
					}
		}, item => item.toString())
}.rowsTemplate("1fr 1fr")
.columnsTemplate("1fr 1fr  1fr 1fr")
.rowsGap(12)
.columnsGap(8)

网络显示如下图 方框所示

五 性能优化

在大数据量情况下， 例如超过10万
使用ForEach加载 List, 会出现白屏， 使用LazyForEach 不会白屏。
ForEach为什么会有性能问题， 假设有1万条数据， 手机的可视区域只能显示5条， 剩余9千多条也会全量加载，ForEach的加载原理就是这样。
LazyForEach实现了按需加载， 减少了页面首次启动时一次性加载数据的时长， 减少了内存峰值。

要对性能优化， 就需要引入指标来进行分析、比较

我们可以从4方面进行优化

1. 优化1 懒加载
2. 优化2 缓存列表项
3. 优化3 组件复用
4. 优化4 布局优化
   

---

注意： 通过设置cachedCount 来指定缓存数量。
不同cachedCount 对列表滑动帧率的影响
一般而言， 缓存的cachedCount= n/2(n为一屏显示的列表数) 的时候， 效果较好。
如果列表项中需要显示网络数据， 而网络数据加载较慢，为了提升列表信息的浏览效率和浏览体验， 我们可以适当的多设置一些缓存数量;
如果列表中需要加载一些大图或者视频等， 占用的内存较大，为了减少内存的占用， 我们需要适当地减少缓存数量的设置 (cachedCount < n/2).

---

---