鸿蒙开发第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 懒加载优化2 缓存列表项优化3 组件复用优化4 布局优化

---

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

---

---