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
2024-08-11 13:55:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

性能方案:

推荐的修改方案是使用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发现应用一次创建很多组件的超长帧

分享
微博
QQ
微信
回复
2024-08-11 21:28:48
相关问题
应用性能问题优化方式哪些
432浏览 • 1回复 待解决
Marquee组件使用问题哪些
335浏览 • 0回复 待解决
HarmonyOS Grid组件子项拖动问题
179浏览 • 1回复 待解决
webview 问题哪些
321浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序的问题
433浏览 • 0回复 待解决
uiTest使用问题哪些
329浏览 • 1回复 待解决
List使用问题哪些
323浏览 • 1回复 待解决
OAID授权问题哪些
419浏览 • 1回复 待解决
签名证书配置问题哪些
514浏览 • 1回复 待解决
启动页面配置问题哪些
582浏览 • 1回复 待解决
Flutter集成问题哪些
180浏览 • 1回复 待解决
ArkTS生成密钥问题哪些
338浏览 • 1回复 待解决
背景属性的问题哪些
439浏览 • 1回复 待解决
bindPopup样式问题哪些啊?
427浏览 • 1回复 待解决
Tab控件切换问题哪些
242浏览 • 1回复 待解决
HarmonyOS Grid相关问题
381浏览 • 1回复 待解决
系统Tabs组件用法哪些
315浏览 • 1回复 待解决
Tabs滑动距离的问题哪些
347浏览 • 1回复 待解决
静态工程引用har问题哪些
403浏览 • 1回复 待解决
Flutter刷新率问题哪些
693浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
2069浏览 • 1回复 待解决
组件复用生效的条件哪些
306浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
336浏览 • 1回复 待解决