Grid组件性能问题有哪些?
以下是宫格模式布局代码,LazyForEach以及自定义组件重用代码都已添加。
测试条件:书架数据800条以上
1、快速滑动出现卡顿感,从最底部极速往上滑加载图片时图片显示占位图并卡住不动;
2、滑动到页面最底部,打开最后一本书籍进入阅读器,再从阅读器返回(会更新书籍打开时间重新排序),此时UI会卡住2-3s,并阻塞用户操作。
测试时,发现如果注释掉BookShelfHeaderView() 和 BookShelfFooterView() 这两个GridItem,则不会出现第2个问题,故推测是设置 columnStart 和 columnEnd这两个属性导致的排版问题。
@Builder
GridLayout() {
Grid(this.scroller) {
if (!this.isManaging) {
GridItem() {
BookShelfHeaderView()
}
.columnStart(0)
.columnEnd(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 4 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 3 : 2)
}
LazyForEach(this.viewModel.bookData, (item: QMBook, index: number) => {
GridItem() {
BookShelfGridCell({
viewModel: this.viewModel,
book: item,
index: index
}).reuseId('BookShelfGridCell')
}
}, (item: Book, index: number) => JSON.stringify(item) + index)
if (!this.isManaging) {
GridItem() {
BookShelfGridAddCell()
}
}
GridItem() {
BookShelfFooterView({ viewModel: this.viewModel })
}
.columnStart(0)
.columnEnd(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 4 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 3 : 2)
}
.backgroundColor($r('app.color.bg1'))
.borderRadius({ topLeft: $r('app.float.view_border_radius'), topRight: $r('app.float.view_border_radius') })
.cachedCount(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 5 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 4 : 3)
.columnsTemplate(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? '1fr 1fr 1fr 1fr 1fr' :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? '1fr 1fr 1fr 1fr' : '1fr 1fr 1fr')
.edgeEffect(EdgeEffect.None)
.layoutDirection(GridDirection.Row)
.rowsGap(24)
.columnsGap(24)
.width('100%')
.height('100%')
.layoutWeight(1)
.padding({ left: 20, right: 20, top: 16 })
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
应用性能问题优化方式有哪些?
296浏览 • 1回复 待解决
Marquee组件使用问题有哪些?
182浏览 • 0回复 待解决
webview 问题有哪些?
139浏览 • 1回复 待解决
OAID授权问题有哪些?
200浏览 • 1回复 待解决
List使用问题有哪些?
244浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序的问题
258浏览 • 0回复 待解决
#鸿蒙学习大百科#Grid组件的GridLayoutOptions选项可以提升性能吗?
199浏览 • 1回复 待解决
ArkTS生成密钥问题有哪些?
245浏览 • 1回复 待解决
启动页面配置问题有哪些?
414浏览 • 1回复 待解决
签名证书配置问题有哪些?
356浏览 • 1回复 待解决
bindPopup样式问题有哪些啊?
330浏览 • 1回复 待解决
Tab控件切换问题有哪些?
145浏览 • 1回复 待解决
背景属性的问题有哪些?
331浏览 • 1回复 待解决
系统Tabs组件用法有哪些?
199浏览 • 1回复 待解决
HarmonyOS Grid相关问题
281浏览 • 1回复 待解决
静态工程引用har问题有哪些?
300浏览 • 1回复 待解决
Tabs滑动距离的问题有哪些?
210浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
1939浏览 • 1回复 待解决
Flutter刷新率问题有哪些?
471浏览 • 1回复 待解决
组件复用生效的条件有哪些?
234浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
199浏览 • 1回复 待解决
HarmonyOS Grid组件使用ForEach网格布局,Ui数据更新问题
407浏览 • 1回复 待解决
HML独有的组件到底有哪些呢?
9414浏览 • 1回复 待解决
grid组件及数据懒加载
868浏览 • 1回复 待解决
是否有衡量页面性能的 API?
553浏览 • 1回复 待解决
性能方案:
推荐的修改方案是使用GridLayoutOptions,参考:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md#%E7%A4%BA%E4%BE%8B3
定位:当从其他页面返回到书架宫格模式页面后,是否调用了 scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign): void 并且smooth 设置为true。 如果是这样的话,建议先设置为false. 开启smooth动效时,会对经过的所有item进行加载和布局计算,当大量加载item时会导致性能问题。 通过trace发现应用一次创建很多组件的超长帧