codecamp

性能提升的推荐方法

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

使用数据懒加载

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

  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、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。

组合手势
使用Web组件加载页面
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
构建第一个ArkTS应用（Stage模型）
Stage模型应用程序包结构
多HAP构建视图
多HAP的开发调试与发布部署流程
多HAP使用规则
多HAP运行机制及数据通信方式
应用程序包安装和卸载流程
应用程序包更新流程
共享包概述
HAR
应用内HSP开发指导
快速修复概述
快速修复命令行调试开发指导
应用配置文件概述（Stage模型）
app.json5配置文件
module.json5配置文件
资源分类与访问

学习ArkTS语言

开发

UI开发

Web

基础类库

通知

媒体

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }