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
相关问题
应用性能问题优化方式哪些
113浏览 • 1回复 待解决
启动页面配置问题哪些
162浏览 • 1回复 待解决
签名证书配置问题哪些
93浏览 • 1回复 待解决
ArkTS生成密钥问题哪些
82浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
1759浏览 • 1回复 待解决
静态工程引用har问题哪些
48浏览 • 1回复 待解决
bindPopup样式问题哪些啊?
133浏览 • 1回复 待解决
组件复用生效的条件哪些
110浏览 • 1回复 待解决
Flutter刷新率问题哪些
139浏览 • 1回复 待解决
grid组件及数据懒加载
598浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2700浏览 • 1回复 待解决
使用Grid 组件实现选座场景
571浏览 • 1回复 待解决
HML独有的组件到底哪些呢?
9166浏览 • 1回复 待解决
HarmonyOS Grid容器视图更新问题
155浏览 • 1回复 待解决
是否衡量页面性能的 API?
383浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
2325浏览 • 1回复 待解决
HarmonyOS grid组件的auto-fit没效果
109浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
1989浏览 • 1回复 待解决
关于Grid容器和WaterFlow使用上的问题
605浏览 • 1回复 待解决