鸿蒙（HarmonyOS）性能优化实战-减少首帧绘制时的冗余操作

最新推荐文章于 2024-06-12 17:42:23 发布
最新推荐文章于 2024-06-12 17:42:23 发布
阅读量1k 收藏 25
点赞数 28
分类专栏： HarmonyOS 移动开发 OpenHarmony 文章标签： harmonyos 性能优化 openharmony 移动开发 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/138170074
版权
移动开发 同时被 3 个专栏收录
956 篇文章 12 订阅
订阅专栏
HarmonyOS
871 篇文章 14 订阅
订阅专栏
OpenHarmony
695 篇文章 17 订阅
订阅专栏

应用冷启动与加载绘制首页

应用冷启动即当启动应用时，后台没有该应用的进程，这时系统会重新创建一个新的进程分配给该应用。

应用冷启动过程大致可分成以下四个阶段：应用进程创建&初始化、Application&Ability初始化、Ability生命周期、加载绘制首页。

加载绘制首页不仅是应用冷启动的四个阶段之一，还是首帧绘制最重要的阶段。而它可以分为三个阶段：加载页面、测量和布局、渲染。本文从这三个阶段入手，分成下面三个场景进行案例优化。

减少加载页面时间

减少加载页面时间可以通过按需加载、减少自定义组件生命周期耗时两种方法来实现。

按需加载

按需加载可以避免一次性初始化和加载所有元素，从而使首帧绘制时加载页面阶段的创建列表元素时间大大减少，从而提升性能表现。

案例：每一个列表元素都被初始化和加载，为了突出效果，方便观察，设定数组中的元素有10000个，使其在加载页面阶段创建列表内元素耗时大大增加。

@Entry
@Component
struct AllLoad {
  @State arr: String[] = Array.from(Array<string>(10000), (val,i) =>i.toString());
  build() {
    List() {
      ForEach(this.arr, (item: string) => {
        ListItem() {
          Text(`item value: ${item}`)
            .fontSize(20)
            .margin({ left: 10 })
        }
      }, (item: string) => item.toString())
    }
  }
}

优化：LazyForEach替换ForEach，避免一次性初始化和加载所有元素。

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index]
  }

  // 注册数据改变的监听器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }

  // 注销数据改变的监听器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }

  // 通知组件重新加载所有数据
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  // 通知组件index的位置有数据添加
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  // 通知组件index的位置有数据有变化
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  // 通知组件删除index位置的数据并刷新LazyForEach的展示内容
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  // 通知组件数据有移动
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = Array.from(Array<string>(10000), (val, i) => i.toString());

  public totalCount(): number {
    return this.dataArray.length
  }

  public getData(index: number): string {
    return this.dataArray[index]
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

@Entry
@Component
struct SmartLoad {
  private data: MyDataSource = new MyDataSource()

  build() {
    List() {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Text(`item value: ${item}`)
            .fontSize(20)
            .margin({ left: 10 })
        }
      }, (item:string) => item)
    }
  }
}
减少自定义组件生命周期时间

LoadPage阶段需要等待自定义组件生命周期aboutToAppear的高耗时任务完成， 导致LoadPage时间大量增加，阻塞主线程后续的布局渲染，所以自定义组件生命周期的耗时任务应当转为Worker线程任务，优先绘制页面，避免启动时阻塞在startWindowIcon页面。

案例：自定义组件生命周期存在高耗时任务，阻塞主线程布局渲染。

@Entry
@Component
struct TaskSync {
  @State private text: string = "";
  private count: number = 0;

  aboutToAppear() {
    this.text = 'hello world';
    this.computeTask(); // 同步任务
  }

  build() {
    Column({space: 10}) {
      Text(this.text).fontSize(50)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  computeTask() {
    this.count = 0;
    while (this.count < 100000000) {
      this.count++;
    }
    this.text = 'task complete';
  }
}

优化：自定义组件生命周期的耗时任务转为Worker线程任务，优先绘制页面，再将Worker子线程结果发送到主线程并更新到页面。

// TaskAsync.ets
import worker from '@ohos.worker';

@Entry
@Component
struct TaskAsync {
  @State private text: string = "";
  private workerInstance:worker.ThreadWorker = new worker.ThreadWorker("entry/ets/workers/worker.ts");

  aboutToAppear() {
    // 处理来自子线程的消息
    this.workerInstance.onmessage = (message)=> {
      console.info('message from worker: ' + JSON.stringify(message))
      this.text = JSON.parse(JSON.stringify(message)).data
      this.workerInstance.terminate()
    }
    this.text = 'hello world';
    // 执行Worker线程任务
    this.computeTaskAsync();
  }

  build() {
    Column({space: 10}) {
      Text(this.text).fontSize(50)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
  private async computeTaskAsync(){
    // 发送消息到子线程
    this.workerInstance.postMessage('hello world')
  }
}

// worker.ts
import worker from '@ohos.worker';

let parentPort = worker.workerPort;

function computeTask(count: number) {
  while (count < 100000000) {
    count++;
  }
  return 'task complete'
}
// 处理来自主线程的消息
parentPort.onmessage = (message) => {
  console.info("onmessage: " + JSON.stringify(message));
  // 发送消息到主线程
  parentPort.postMessage(computeTask(0));
}

减少布局时间

减少布局时间可以通过异步加载和减少视图嵌套层次两种方法来实现。

异步加载

同步加载的操作，使创建图像任务需要在主线程完成，页面布局Layout需要等待创建图像makePixelMap任务的执行，导致布局时间延长。相反，异步加载的操作，在其他线程完成，和页面布局Layout同时开始，且没有阻碍页面布局，所以页面布局更快，性能更好。但是，并不是所有的加载都必须使用异步加载，建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可。

案例：使用Image组件同步加载高分辨率图片，阻塞UI线程，增加了页面布局总时间。

@Entry
@Component
struct SyncLoadImage {
  @State arr: String[] = Array.from(Array<string>(100), (val,i) =>i.toString());
  build() {
    Column() {
      Row() {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Image($r('app.media.4k'))
                .border({ width: 1 })
                .borderStyle(BorderStyle.Dashed)
                .height(100)
                .width(100)
                .syncLoad(true)
            }
          }, (item: string) => item.toString())
        }
      }
    }
  }
}

优化：使用Image组件默认的异步加载方式加载图片，不阻塞UI线程，降低页面布局时间。

@Entry
@Component
struct AsyncLoadImage {
  @State arr: String[] = Array.from(Array<string>(100), (val,i) =>i.toString());
    build() {
      Column() {
        Row() {
          List() {
            ForEach(this.arr, (item: string) => {
              ListItem() {
                Image($r('app.media.4k'))
                  .border({ width: 1 })
                  .borderStyle(BorderStyle.Dashed)
                  .height(100)
                  .width(100)
              }
            }, (item: string) => item.toString())
          }
        }
      }
  }
}
减少视图嵌套层次

视图的嵌套层次会影响应用的性能。通过减少不合理的容器组件，可以使布局深度降低，布局时间减少，优化布局性能，提升用户体验。

案例：通过Grid网格容器一次性加载1000个网格，并且额外使用3层Flex容器模拟不合理的深嵌套场景使布局时间增加。

@Entry
@Component
struct Depth1 {
  @State number: Number[] = Array.from(Array<number>(1000), (val, i) => i);
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Grid(this.scroller) {
        ForEach(this.number, (item: number) => {
          GridItem() {
            Flex() {
              Flex() {
                Flex() {
                  Text(item.toString())
                    .fontSize(16)
                    .backgroundColor(0xF9CF93)
                    .width('100%')
                    .height(80)
                    .textAlign(TextAlign.Center)
                    .border({width:1})
                }
              }
            }
          }
        }, (item:string) => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(0)
      .rowsGap(0)
      .size({ width: "100%", height: "100%" })
    }
  }
}

优化：通过Grid网格容器一次性加载1000个网格，去除额外的不合理的布局容器，降低布局时间。

@Entry
@Component
struct Depth2 {
  @State number: Number[] = Array.from(Array<number>(1000), (val, i) => i);
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Grid(this.scroller) {
        ForEach(this.number, (item: number) => {
          GridItem() {
                  Text(item.toString())
                    .fontSize(16)
                    .backgroundColor(0xF9CF93)
                    .width('100%')
                    .height(80)
                    .textAlign(TextAlign.Center)
                    .border({width:1})
          }
        }, (item:string) => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(0)
      .rowsGap(0)
      .size({ width: "100%", height: "100%" })
    }
  }
}

减少渲染时间

减少渲染时间可以通过条件渲染替代显隐控制的方法来实现。

条件渲染

通过条件渲染替代显隐控制，首帧绘制时的渲染时间明显降低，从而提升性能表现。另外，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。

案例：通过visibility属性控制当前组件显示或隐藏。

@Entry
@Component
struct VisibilityExample {
  build() {
    Column() {
      Column() {
        // 隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 隐藏参与占位
        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 正常显示，组件默认的显示模式
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}

优化：通过条件渲染替代显隐控制。

@Entry
@Component
struct IsVisibleExample {
  @State isVisible : boolean = true;

  build() {
    Column(){
      Column() {
        //不渲染即达到隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        if (!this.isVisible) {
          Row().width('90%').height(80).backgroundColor(0xAFEEEE)
        }
        
        // 隐藏参与占位无法通过条件渲染实现
        
        // 渲染即正常占位显示
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        if (this.isVisible){
          Row().width('90%').height(80).backgroundColor(0xAFEEEE)
        }
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

OpenHarmony_小贾
关注
专栏目录
鸿蒙HarmonyOS应用开发 | 仓颉在 HarmonyOS 开发中的应用与创新实战
一键难忘的博客
09-20 2746
HarmonyOS 作为一款面向全场景的分布式操作系统，为开发者提供了丰富的开发工具和技术。其中，仓颉作为 HarmonyOS 的自研编程语言，具有独特的优势和潜力。本文将深入探讨仓颉在 HarmonyOS 开发中的应用与创新。
OpenHarmony实战开发-减少首帧绘制时的冗余操作。
2401_82546228的博客
04-22 890
应用冷启动即当启动应用时，后台没有该应用的进程，这时系统会重新创建一个新的进程分配给该应用。
OpenHarmony实战开发-减小应用包大小。
m0_70749039的博客
04-23 1029
减小应用包大小是提升应用下载、安装体验的重要方式之一。通过压缩、精简或者复用应用中的代码或资源，可以有效降低应用的大小，提升应用下载和安装速度，减少系统空间占用。
面试必问！在鸿蒙应用开发你用过哪些性能优化策略和技术手段？
1
04-09 1141
除了上述具体的优化策略外，鸿蒙系统还提供了一些工具和框架来帮助开发者进行性能优化。同时，鸿蒙系统也提供了分布式框架和其他第三方框架，可以帮助开发者实现跨平台开发，提高开发效率。在鸿蒙应用开发中，性能优化是一个关键方面，它涉及多个方面的策略和技术手段，如启动速度优化、内存管理优化和功耗控制。总之，在鸿蒙应用开发中，性能优化是一个持续的过程，需要开发者在开发过程中不断关注并采取相应的优化策略和技术手段来提高应用的性能。3.内存管理在鸿蒙系统中尤为关键，请谈谈你会如何有效地进行内存优化，避免内存泄漏？
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：NavDestination）
m0_64420071的博客
03-11 1185
ArkTS声明式开发（基础手势：NavDestination）
OpenHarmony实战开发-提升应用响应速度。
m0_70749039的博客
04-22 1136
应用对用户的输入需要快速反馈，以提升交互体验，因此本文提供了以下方法来提升应用响应速度。
鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）_harmonyos元服务卡片
04-11 666
Entry@Component// 初始化CanvasRenderingContext2D和RenderingContextSettingsbuild() {Column() {Row() {// 在onReady回调中获取画布的实际宽和高// 绘制画布的背景// 在画布的中心绘制一个红色的圆// 绘制笑脸的左眼// 绘制笑脸的右眼。
harmonyos英文怎么读-api-harmonyos-lite-wearable-ui:鸿蒙应用LiteWearableUI标准库-api
07-01
在标题中提到的"api-harmonyos-lite-wearable-ui"，指的是HarmonyOS Lite版本针对可穿戴设备的用户界面（UI）标准库API。这个库提供了开发者构建轻量级、高效且适应可穿戴设备屏幕特性的应用程序所需的功能。 ...
HarmonyOS应用开发-放大与缩小效果展现.zip
05-20
在 HarmonyOS 应用开发中，实现物体的放大与缩小效果是增强用户交互体验的关键技术之一。这通常涉及到图形绘制、动画处理以及视图变换等多个方面。本教程将深入探讨如何在 HarmonyOS 平台上创建这样的动态效果，帮助...
harmonyos源代码-harmonyos-oled-player:使用鸿蒙OS在0.96寸OLED屏上播放视频|Playvideoon0.
07-01
harmonyos-oled-player 使用鸿蒙OS在0.96寸OLED屏上播放视频 | Play video on 0.96' OLED display with Harmony OS 简介 基于HiSpark WiFi IoT套件（Hi3861芯片），板载0.96寸 128x64 分辨率的 OLED屏 板端程序使用...
鸿蒙（HarmonyOS）性能优化实战-多板块性能提升方案
最新发布
m0_70748458的博客
06-12 860
开发者若使用低性能的代码实现功能场景可能不会影响应用的正常运行，但却会对应用的性能造成负面影响。本章节列举出了一些可提升性能的场景供开发者参考，以避免应用实现上带来的性能劣化。
应用性能分析工具CPU Profiler
maniuT的博客
04-06 1240
本文档介绍应用性能分析工具CPU Profiler的使用方法，该工具为开发者提供性能采样分析手段，可在不插桩情况下获取调用栈上各层函数的执行时间，并展示在时间轴上。开发者可通过该工具查看TS/JS代码及NAPI代码执行过程中的时序及耗时情况，进而发现热点函数及性能瓶颈，进行应用层性能优化。
2024年鸿蒙最新Web前端性能优化，应该怎么做 _web性能优化怎么做(2)，美团3面
2401_84871291的博客
05-15 410
对于动画来说：能用css解决的不用js（能够用transform处理的，不用传统的css样式，因为transform开启硬件加速，不会引发回流，或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置造成影响），能用 requestAnimationFrame解决的不用定时器。），当代项目基本基于mvvm，mvc数据驱动视图渲染的，对DOM的操作框架本身完成，性能要好很多。低耦合高内聚（基于封装的方式：方法封装，插件，组件，框架，类库等封装，减少页面中的冗余代码，提高代码使用率）
【HarmonyOS NEXT】Image控件加载图片缓存问题
Mayism123的博客
03-22 635
是否有方案能实现下述业务需求：图片在app全局使用缓存，在特定场景下实时从服务端获取，例如加载用户头像时，业务一旦将图片下线处理，图片找不到时需要恢复默认。图片有内存缓存机制，会统计到当前APP，缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。也可以不开启全局缓存，使用ImageKnife给图片单独设置缓存，部分场景下使用Image组件来设置图片不缓存。目前ArkUI提供的Image组件原生能力，无法满足全局缓存、部分场景下不缓存的业务场景。
【最新鸿蒙应用开发】——优化之从启动和响应速度作为思路
m0_68038853的博客
05-29 1368
aboutToAppear函数会在创建自定义组件实例后，页面绘制之前执行，此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。在aboutToAppear()生命周期函数内建议只做当前组件的初始化逻辑，对于不需要等待结果的高耗时任务，可以使用多线程处理该任务，通过并发的方式避免主线程阻塞；也可以把耗时操作改为异步并发或延后处理，保证主线程优先处理组件绘制逻辑。
OpenHarmony实战开发-减少动画丢帧。
2401_82546228的博客
04-22 485
在播放动画或者生成动画时，画面产生停滞而导致帧率过低的现象，称为动画丢帧。
C++核心准则T.12:声明局部变量类型时，概念比auto更好
面向对象思考
10-26 569
T.12: Prefer concept names overautofor local variables T.12:声明局部变量类型时，概念比auto更好 Reason（原因） autois the weakest concept. Concept names convey more meaning than justauto. auto是最弱的概念。相比只用auto，概念名可以传递更多信息。 Example (using TS concepts) 示例（使用TS概念） ...
OpenHarmony实战开发-提升应用冷启动速度。
2401_82546228的博客
04-22 1267
应用启动时延是影响用户体验的关键要素。当应用启动时，后台没有该应用的进程，这时系统会重新创建一个新的进程分配给该应用， 这个启动方式就叫做冷启动。
详细教程 - 进阶版 鸿蒙harmonyOS应用 第十八节——鸿蒙OS应用性能优化指南
爱蹦跶的全栈大A阿
12-22 1620
性能优化是提升鸿蒙OS应用质量的重要手段。优化的角度包括加载速度、CPU使用率、内存占用、电量消耗、网络流量等多个方面。本文将通俗解释性能表现的影响因素,并结合实例提供有效的检测分析方法与优化策略建议,帮助开发者系统地提升应用性能与用户体验。性能优化综合考量了加载速度、CPU、内存、电量、网络等多个维度,其核心在于分析瓶颈原因,寻找优化机会。减少和控制资源占用优化关键路径与热点代码异步并行,分而治之算法优化,空间换时间流量调度,避免拥塞。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值