【鸿蒙开发】关于性能优化的小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)可以减少组件的嵌套有效的提升性能,减少时间开销

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


总结

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

相关推荐
是乐谷2 小时前
阿里招AI产品运营
人工智能·程序人生·面试·职场和发展·产品运营·求职招聘
鹿鸣天涯2 小时前
鸿蒙OS 系统安全
华为·系统安全·harmonyos
天天扭码2 小时前
很全面的前端面试题——手写题(上)
前端·javascript·面试
程序员小寒3 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
ZzMemory5 小时前
一套通关CSS选择器,玩转元素定位
前端·css·面试
圆心角5 小时前
小米面挂了
前端·面试
拉不动的猪7 小时前
回顾 pinia VS vuex
前端·vue.js·面试
kymjs张涛7 小时前
HarmonyOS Next 全兼容,三端统一的路由跳转方案
harmonyos
拉不动的猪8 小时前
jS篇Async await实现同步效果的原理
前端·javascript·面试
前端世界9 小时前
鸿蒙系统下的动态负载均衡实战:让分布式任务调度更智能
分布式·负载均衡·harmonyos