• HarmonyOS—UI开发性能提升的推荐方法

    注：本文转载自HarmonyOS官网文档

    开发者若使用低性能的代码实现功能场景可能不会影响应用的正常运行，但却会对应用的性能造成负面影响。本章节列举出了一些可提升性能的场景供开发者参考，以避免应用实现上带来的性能劣化。

    使用数据懒加载

    开发者在使用长列表时，如果直接采用循环渲染方式，如下所示，会一次性加载所有的列表元素，一方面会导致页面启动时间过长，影响用户体验，另一方面也会增加服务器的压力和流量，加重系统负

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   @State arr: number[] = Array.from(Array(100), (v,k) =>k);  //构造0-99的数组
    5.   build() {
    6.     List() {
    7.       ForEach(this.arr, (item: number) => {
    8.         ListItem() {
    9.           Text(`item value: ${item}`)
    10.         }
    11.       }, (item: number) => item.toString())
    12.     }
    13.   }
    14. }

    上述代码会在页面加载时将100个列表元素全部加载，这并非我们需要的，我们希望从数据源中按需迭代加载数据并创建相应组件，因此需要使用数据懒加载，如下所示：

    1. class BasicDataSource implements IDataSource {
    2.   private listeners: DataChangeListener[] = []
    3.  
    4.   public totalCount(): number {
    5.     return 0
    6.   }
    7.  
    8.   public getData(index: number): any {
    9.     return undefined
    10.   }
    11.  
    12.   registerDataChangeListener(listener: DataChangeListener): void {
    13.     if (this.listeners.indexOf(listener) < 0) {
    14.       console.info('add listener')
    15.       this.listeners.push(listener)
    16.     }
    17.   }
    18.  
    19.   unregisterDataChangeListener(listener: DataChangeListener): void {
    20.     const pos = this.listeners.indexOf(listener);
    21.     if (pos >= 0) {
    22.       console.info('remove listener')
    23.       this.listeners.splice(pos, 1)
    24.     }
    25.   }
    26.  
    27.   notifyDataReload(): void {
    28.     this.listeners.forEach(listener => {
    29.       listener.onDataReloaded()
    30.     })
    31.   }
    32.  
    33.   notifyDataAdd(index: number): void {
    34.     this.listeners.forEach(listener => {
    35.       listener.onDataAdd(index)
    36.     })
    37.   }
    38.  
    39.   notifyDataChange(index: number): void {
    40.     this.listeners.forEach(listener => {
    41.       listener.onDataChange(index)
    42.     })
    43.   }
    44.  
    45.   notifyDataDelete(index: number): void {
    46.     this.listeners.forEach(listener => {
    47.       listener.onDataDelete(index)
    48.     })
    49.   }
    50.  
    51.   notifyDataMove(from: number, to: number): void {
    52.     this.listeners.forEach(listener => {
    53.       listener.onDataMove(from, to)
    54.     })
    55.   }
    56. }
    57.  
    58. class MyDataSource extends BasicDataSource {
    59.   private dataArray: string[] = ['item value: 0', 'item value: 1', 'item value: 2']
    60.  
    61.   public totalCount(): number {
    62.     return this.dataArray.length
    63.   }
    64.  
    65.   public getData(index: number): any {
    66.     return this.dataArray[index]
    67.   }
    68.  
    69.   public addData(index: number, data: string): void {
    70.     this.dataArray.splice(index, 0, data)
    71.     this.notifyDataAdd(index)
    72.   }
    73.  
    74.   public pushData(data: string): void {
    75.     this.dataArray.push(data)
    76.     this.notifyDataAdd(this.dataArray.length - 1)
    77.   }
    78. }
    79.  
    80. @Entry
    81. @Component
    82. struct MyComponent {
    83.   private data: MyDataSource = new MyDataSource()
    84.  
    85.   build() {
    86.     List() {
    87.       LazyForEach(this.data, (item: string) => {
    88.         ListItem() {
    89.           Row() {
    90.             Text(item).fontSize(20).margin({ left: 10 })
    91.           }
    92.         }
    93.         .onClick(() => {
    94.           this.data.pushData('item value: ' + this.data.totalCount())
    95.         })
    96.       }, item => item)
    97.     }
    98.   }
    99. }

    上述代码在页面加载时仅初始化加载三个列表元素，之后每点击一次列表元素，将增加一个列表元素。

    设置List组件的宽高

    在使用Scroll容器组件嵌套List组件加载长列表时，若不指定List的宽高尺寸，则默认全部加载。

    说明

    Scroll嵌套List时：

    • List没有设置宽高，会布局List的所有子组件。
    • List设置宽高，会布局List显示区域内的子组件。
    • List使用ForEach加载子组件时，无论是否设置List的宽高，都会加载所有子组件。
    • List使用LazyForEach加载子组件时，没有设置List的宽高，会加载所有子组件，设置了List的宽高，会加载List显示区域内的子组件。

    1. class BasicDataSource implements IDataSource {
    2.   private listeners: DataChangeListener[] = []
    3.  
    4.   public totalCount(): number {
    5.     return 0
    6.   }
    7.  
    8.   public getData(index: number): any {
    9.     return undefined
    10.   }
    11.  
    12.   registerDataChangeListener(listener: DataChangeListener): void {
    13.     if (this.listeners.indexOf(listener) < 0) {
    14.       console.info('add listener')
    15.       this.listeners.push(listener)
    16.     }
    17.   }
    18.  
    19.   unregisterDataChangeListener(listener: DataChangeListener): void {
    20.     const pos = this.listeners.indexOf(listener);
    21.     if (pos >= 0) {
    22.       console.info('remove listener')
    23.       this.listeners.splice(pos, 1)
    24.     }
    25.   }
    26.  
    27.   notifyDataReload(): void {
    28.     this.listeners.forEach(listener => {
    29.       listener.onDataReloaded()
    30.     })
    31.   }
    32.  
    33.   notifyDataAdd(index: number): void {
    34.     this.listeners.forEach(listener => {
    35.       listener.onDataAdd(index)
    36.     })
    37.   }
    38.  
    39.   notifyDataChange(index: number): void {
    40.     this.listeners.forEach(listener => {
    41.       listener.onDataChange(index)
    42.     })
    43.   }
    44.  
    45.   notifyDataDelete(index: number): void {
    46.     this.listeners.forEach(listener => {
    47.       listener.onDataDelete(index)
    48.     })
    49.   }
    50.  
    51.   notifyDataMove(from: number, to: number): void {
    52.     this.listeners.forEach(listener => {
    53.       listener.onDataMove(from, to)
    54.     })
    55.   }
    56. }
    57.  
    58. class MyDataSource extends BasicDataSource {
    59.   private dataArray: Array<string> = new Array(100).fill('test')
    60.  
    61.   public totalCount(): number {
    62.     return this.dataArray.length
    63.   }
    64.  
    65.   public getData(index: number): any {
    66.     return this.dataArray[index]
    67.   }
    68.  
    69.   public addData(index: number, data: string): void {
    70.     this.dataArray.splice(index, 0, data)
    71.     this.notifyDataAdd(index)
    72.   }
    73.  
    74.   public pushData(data: string): void {
    75.     this.dataArray.push(data)
    76.     this.notifyDataAdd(this.dataArray.length - 1)
    77.   }
    78. }
    79.  
    80. @Entry
    81. @Component
    82. struct MyComponent {
    83.   private data: MyDataSource = new MyDataSource()
    84.  
    85.   build() {
    86.     Scroll() {
    87.       List() {
    88.         LazyForEach(this.data, (item: string, index: number) => {
    89.           ListItem() {
    90.             Row() {
    91.               Text('item value: ' + item + (index + 1)).fontSize(20).margin(10)
    92.             }
    93.           }
    94.         })
    95.       }
    96.     }
    97.   }
    98. }

    因此，此场景下建议设置List子组件的宽高。

    1. class BasicDataSource implements IDataSource {
    2.   private listeners: DataChangeListener[] = []
    3.  
    4.   public totalCount(): number {
    5.     return 0
    6.   }
    7.  
    8.   public getData(index: number): any {
    9.     return undefined
    10.   }
    11.  
    12.   registerDataChangeListener(listener: DataChangeListener): void {
    13.     if (this.listeners.indexOf(listener) < 0) {
    14.       console.info('add listener')
    15.       this.listeners.push(listener)
    16.     }
    17.   }
    18.  
    19.   unregisterDataChangeListener(listener: DataChangeListener): void {
    20.     const pos = this.listeners.indexOf(listener);
    21.     if (pos >= 0) {
    22.       console.info('remove listener')
    23.       this.listeners.splice(pos, 1)
    24.     }
    25.   }
    26.  
    27.   notifyDataReload(): void {
    28.     this.listeners.forEach(listener => {
    29.       listener.onDataReloaded()
    30.     })
    31.   }
    32.  
    33.   notifyDataAdd(index: number): void {
    34.     this.listeners.forEach(listener => {
    35.       listener.onDataAdd(index)
    36.     })
    37.   }
    38.  
    39.   notifyDataChange(index: number): void {
    40.     this.listeners.forEach(listener => {
    41.       listener.onDataChange(index)
    42.     })
    43.   }
    44.  
    45.   notifyDataDelete(index: number): void {
    46.     this.listeners.forEach(listener => {
    47.       listener.onDataDelete(index)
    48.     })
    49.   }
    50.  
    51.   notifyDataMove(from: number, to: number): void {
    52.     this.listeners.forEach(listener => {
    53.       listener.onDataMove(from, to)
    54.     })
    55.   }
    56. }
    57.  
    58. class MyDataSource extends BasicDataSource {
    59.   private dataArray: Array<string> = new Array(100).fill('test')
    60.  
    61.   public totalCount(): number {
    62.     return this.dataArray.length
    63.   }
    64.  
    65.   public getData(index: number): any {
    66.     return this.dataArray[index]
    67.   }
    68.  
    69.   public addData(index: number, data: string): void {
    70.     this.dataArray.splice(index, 0, data)
    71.     this.notifyDataAdd(index)
    72.   }
    73.  
    74.   public pushData(data: string): void {
    75.     this.dataArray.push(data)
    76.     this.notifyDataAdd(this.dataArray.length - 1)
    77.   }
    78. }
    79.  
    80. @Entry
    81. @Component
    82. struct MyComponent {
    83.   private data: MyDataSource = new MyDataSource()
    84.  
    85.   build() {
    86.     Scroll() {
    87.       List() {
    88.         LazyForEach(this.data, (item: string, index: number) => {
    89.           ListItem() {
    90.             Text('item value: ' + item + (index + 1)).fontSize(20).margin(10)
    91.           }.width('100%')
    92.         })
    93.       }.width('100%').height(500)
    94.     }.backgroundColor(Color.Pink)
    95.   }
    96. }

    使用条件渲染替代显隐控制

    如下所示，开发者在使用visibility通用属性控制组件的显隐状态时，仍存在组件的重新创建过程，造成性能上的损耗。

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   @State isVisible: Visibility = Visibility.Visible;
    5.  
    6.   build() {
    7.     Column() {
    8.       Button("显隐切换")
    9.         .onClick(() => {
    10.           if (this.isVisible == Visibility.Visible) {
    11.             this.isVisible = Visibility.None
    12.           } else {
    13.             this.isVisible = Visibility.Visible
    14.           }
    15.         })
    16.       Row().visibility(this.isVisible)
    17.         .width(300).height(300).backgroundColor(Color.Pink)
    18.     }.width('100%')
    19.   }
    20. }

    要避免这一问题，可使用if条件渲染代替visibility属性变换，如下所示：

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   @State isVisible: boolean = true;
    5.  
    6.   build() {
    7.     Column() {
    8.       Button("显隐切换")
    9.         .onClick(() => {
    10.           this.isVisible = !this.isVisible
    11.         })
    12.       if (this.isVisible) {
    13.         Row()
    14.           .width(300).height(300).backgroundColor(Color.Pink)
    15.       }
    16.     }.width('100%')
    17.   }
    18. }

    使用Column/Row替代Flex

    由于Flex容器组件默认情况下存在shrink导致二次布局，这会在一定程度上造成页面渲染上的性能劣化。

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   build() {
    5.     Flex({ direction: FlexDirection.Column }) {
    6.       Flex().width(300).height(200).backgroundColor(Color.Pink)
    7.       Flex().width(300).height(200).backgroundColor(Color.Yellow)
    8.       Flex().width(300).height(200).backgroundColor(Color.Grey)
    9.     }
    10.   }
    11. }

    上述代码可将Flex替换为Column、Row，在保证实现的页面布局效果相同的前提下避免Flex二次布局带来的负面影响。

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   build() {
    5.     Column() {
    6.       Row().width(300).height(200).backgroundColor(Color.Pink)
    7.       Row().width(300).height(200).backgroundColor(Color.Yellow)
    8.       Row().width(300).height(200).backgroundColor(Color.Grey)
    9.     }
    10.   }
    11. }

    减少应用滑动白块

    应用通过增大List/Grid控件的cachedCount参数，调整UI的加载范围。cachedCount表示屏幕外List/Grid预加载item的个数。

    如果需要请求网络图片，可以在item滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。

    如下是使用cachedCount参数的例子：

    1. @Entry
    2. @Component
    3. struct MyComponent {
    4.   private source: MyDataSource = new MyDataSource();
    5.  
    6.   build() {
    7.     List() {
    8.       LazyForEach(this.source, item => {
    9.         ListItem() {
    10.           Text("Hello" + item)
    11.             .fontSize(50)
    12.             .onAppear(() => {
    13.               console.log("appear:" + item)
    14.             })
    15.         }
    16.       })
    17.     }.cachedCount(3) // 扩大数值appear日志范围会变大
    18.   }
    19. }
    20.  
    21. class MyDataSource implements IDataSource {
    22.   data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
    23.  
    24.   public totalCount(): number {
    25.     return this.data.length
    26.   }
    27.  
    28.   public getData(index: number): any {
    29.     return this.data[index]
    30.   }
    31.  
    32.   registerDataChangeListener(listener: DataChangeListener): void {
    33.   }
    34.  
    35.   unregisterDataChangeListener(listener: DataChangeListener): void {
    36.   }
    37. }

    使用说明：

    cachedCount的增加会增大UI的cpu、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。

    点击关注阅读原文，了解更多精彩资讯

  • 相关阅读:
    计算机毕业设计 生活废品回收系统 Vue+SpringBoot+MySQL
    20天拿下华为OD笔试之【模拟】2023B-阿里巴巴找黄金宝箱(1)【欧弟算法】全网注释最详细分类最全的华为OD真题题解
    visual studio code(vs code)历史版本下载
    高效正则匹配工具
    JS 字符串
    ubuntu系统 kubeadm方式搭建k8s集群
    华为机试练习题：HJ51 输出单向链表中倒数第k个结点
    智慧新能源电站远程监控系统总体设计
    MES在注塑制造领域的运用
    前端常用设计模式
  • 原文地址：https://blog.csdn.net/HarmonyOSDev/article/details/132598188