【鸿蒙开发】关于性能优化的小tips

系列文章目录

【鸿蒙开发】鸿蒙开发基础干货篇--1
【鸿蒙开发】基础干货篇--2 小白入门手册(内含Dev Eco安装教程和汉化插件安装)
【鸿蒙开发】基础干货篇--3 小白入门手册 (内含模拟器保姆级安装使用教程)
【鸿蒙开发】基础干货篇--4 小白入门手册(内含Stage模型工程目录结构和UIAbility 组件详解)
【鸿蒙开发】基础干货篇--5 "一篇带你掌握应用状态"
【鸿蒙开发】基础干货篇--6 "超简单持久化存储PersistentStorage"
【鸿蒙开发】基础干货篇--7 "一篇带你掌握三种页面跳转"
【鸿蒙开发】"一篇带你掌握HAP、HAR、HSP"
【鸿蒙开发】超全面解读 带你充分掌握---"应用沉浸式效果开发"
【鸿蒙开发】超全面解读 带你充分掌握---"向用户申请授权"


文章目录


前言

应用或元服务运行期间可能出现响应速度慢、动画播放不流畅、列表拖动卡顿、应用崩溃或耗电量过高、发烫、交互延迟等现象,这些现象表明应用或元服务可能存在性能问题。造成性能问题的原因可能是业务逻辑、应用代码对系统API的误用、对ArkTS对象的不合理持有导致内存泄露等,引起对系统资源不合理使用,包括对CPU、内存、网络、文件、GPU、以及其他外设等器件的冗余占用,进而引发性能问题。


一、进行性能优化主要围绕关键点"降负载"?

  1. 永久降负载。即将原本不合理的冗余处理进行彻底清理;
  2. 临时降负载。即避免在关键时间段内扎堆产生负载。可以考虑采用懒加载等延迟处理机制,错峰运行。

在遇到这些问题时,首先需要对应用的运行情况以及设备的资源消耗进行监测,以初步确定可能存在的性能问题以及问题出现的位置,进而有针对性的降低负载。

DevEco Profiler提供实时监控(Realtime Monitor)能力,提供全方位的设备资源监测,覆盖系统事件、异常报告、CPU占用、内存占用、实时帧率、GPU使用率以及能耗等多个维度的数据,自顶向下逐层展开分析,并可借助DevEco Profiler跳转到代码位置,结合代码进行白盒分析,明确不合理的负载出现位置,帮助识别性能瓶颈,定界问题所在,提高解决问题的效率。

二、ArkUI分析

ArkUI分析用于定位由于组件耗时、页面布局、状态变量更新导致的卡顿问题。常见场景包含:

  1. 布局嵌套过多引起的性能问题;
  2. 数据结构设计不合理,应用使用一个较大的Object,在更新时,只更新某些属性,导致其他没变化的属性也会更新,产生冗余刷新;
  3. 父组件中的子组件重复绑定同一个状态变量进行更新;
  4. 未正确使用装饰器,如错误使用@Prop传递一个大的对象进行深度拷贝。

1.网格的性能优化

当构建具有大量网格项的可滚动网格布局时,推荐使用数据懒加载 方式实现按需迭代加载数据,从而提升列表性能。

实现按需加载优化

当使用懒加载方式渲染网格时,为了更好的滚动体验,减少滑动时出现白块,Grid组件中也可通过cachedCount属性设置GridItem的预加载数量,只在 懒加载LazyForEach中生效。

设置预加载数量后,会在Grid显示区域前后各缓存cachedCount*列数个GridItem,超出显示和缓存范围的GridItem会被释放。

typescript 复制代码
Grid() {
  LazyForEach(this.dataSource, () => {
    GridItem() {
    }
  })
}
.cachedCount(3)

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

2.UI组件性能优化

应用启动到UI页面展示过程包含框架初始化页面加载布局渲染三个步骤。

其中页面加载和布局渲染的主要流程如下:

  • 在执行页面文件时,前端UI描述会在后端创建相应的FrameNode节点树。该树主要用于处理UI组件属性更新、布局测算、事件处理。每个树节点和前端UI组件是一一对应的关系
  • FrameNode节点树生成之后,根节点开始创建布局任务。该任务遍历所有子节点并创建子节点的布局包装任务。布局包装任务包括执行相关测算和布局任务。
  • 布局包装任务完成后,每个FrameNode将创建相应的渲染包装任务并进行内容绘制

为缩短页面加载和布局渲染时长,在前端使用UI组件时可以考虑以下优化方案:

  1. 避免在自定义组件的生命周期内执行高耗时操作:自定义组件创建后在渲染前会调用其生命周期回调函数,若函数中包含高耗时操作将阻塞UI渲染,将增加主线程负担。
  2. 按需注册组件属性
  3. 使用@builder函数代替自定义组件
  4. 合理使用布局容器组件:可以考虑对容器组件内的子组件进行按需加载或懒加载等处理,对于相同结构的组件也可以使用组件复用能力。

自定义组件生命周期流程图

提示:在布局上选择相对布局 (RelativeContainer)可以减少组件的嵌套有效的提升性能,减少时间开销

在组件嵌套的情况中,可以找到一些无用的容器组件嵌套。在考虑组件嵌套优化中,可以删除掉无用容器组件嵌套,移除冗余节点,从而避免冗余节点对性能的消耗。


总结

以上就是今天要讲的内容,本文仅仅简单介绍了少部分的性能优化。

相关推荐
Ruihong4 小时前
Vue withDefaults 转 React:VuReact 怎么处理?
vue.js·react.js·面试
kyriewen5 小时前
别再这样写 async/await 了:我在 Code Review 中见过最多的 8 个错误
前端·javascript·面试
烬羽10 小时前
字符串算法入门:从反转字符串到回文判断,面试不再慌
算法·面试
云技纵横10 小时前
一个 @Async,把 @Transactional 的事务边界打穿了
后端·面试
想要成为糕糕手10 小时前
Harness Engineering:大模型时代的“马鞍”——从记忆层开始,让AI真正为你所用
面试·ai编程·claude
ONEDAY10 小时前
HarmonyOS 深色模式适配实践:从资源、WebView 到网络图统一处理
harmonyos
kyriewen1 天前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试
她的男孩1 天前
后台接口加密别只会 HTTPS,ForgeAdmin 的 RSA + SM4/AES 源码拆解
后端·面试·开源
Randyliu1 天前
20260508-Agent搭建记录以及对ReAct框架的理解
面试·agent
ZzT1 天前
公司用 AI 筛简历,他写了个 AI 帮你挑公司
面试·aigc·ai编程