应用性能优化实践(三)减少丢帧卡顿

一、减少丢帧卡顿的方法

1、避免在主线程上执行耗时的操作

UI主线程是HarmonyOS应用中最重要的线程之一,在主线程上执行耗时的操作会阻塞UI渲染,从而导致UI主线程的负载过高。因此,可以将耗时操作放在TaskPool或Worker等后台线程中执行。

2、减少渲染进程的冗余开销

使用资源图代替绘制、合理使用renderGroup、尺寸位置设置尽量使用整数,可以减少渲染所需的时间,从而减少丢帧卡顿。

3、减少视图嵌套层级

应用开发中的用户界面(UI)布局是用户与应用程序交互的关键部分。不合理的布局越多,视图的创建、布局、渲染等流程所需的时间就越长。因此,减少嵌套层次或者使用高性能布局节点,可以减少丢帧卡顿。

4、组件配合使用LazyForEach

使用ArkUI开发范式提供的组件复用机制,通过重复利用已经创建过并缓存的组件对象,降低组件短时间内频繁创建和销毁的开销,提升组件加载效率,降低UI线程负载,从而减少丢帧卡顿。

5、精确控制状态变量的关联组件数

@state等状态变量关联组件越多,状态数据变更时刷新的组件越多,UI线程负载越重,因此移除冗余的组件可以减少丢帧卡顿。

6、在对象上谨慎使用状态变量关联

二、减少渲染进程的冗余开销

1、动画场景

(1)组件转场动画推荐使用transition

(2)动画参数相同时使用同一个animateTo

由于每次animateTo都需要进行动画对比,使用多个animateTo的性能不如只使用一个animateTo。特别针对设置在同一组件的属性,能减少该组件更新的次数。

(3)多次animateTo时统一更新状态变量

animateTo会将执行动画闭包前后的状态进行对比,对差异部分进行动画。为了对比,会在执行animateTo的动画闭包之前,将所有变更的状态变量和脏节点都刷新。如果多个animateTo之间存在状态更新,会导致执行下一个animateTo之前又存在需要更新的脏节点,可能会造成冗余更新。

2、合理使用RenderGroup

首次绘制组件时,若组件被标记为rendergroup状态,将对组件以及其子节点进行离屏绘制,将绘制结果结果进行缓存,此后当需要重新绘制组件时,就会优先使用缓存而不必重新绘制,从而降低绘制负载,优化渲染性能。

3、减少视图层级嵌套

嵌套层级越深,会有更大的系统内存开销。因此在开发过程中,要尽可能减少布局嵌套,是布局更加扁平化。例如RelativeContainer可以根据锚点来进行低嵌套层级复杂布局,而List和Grid等高级组件不但能使布局扁平化,而且支持懒加载等提升性能的方法,是更加推荐的布局方式。

4、组件复用

推荐场景:

滑动场景下对同一类自定义组件进行频繁的创建与销毁;

反复切换条件渲染的控制分支,且控制分支中的组件子树结构相同。

5、精确控制状态变量的关联组件数

不推荐使用更新单个状态变量的形式自行控制多个组件更新时机(命令式)。

推荐使用状态变量和组件---绑定的方式,以数据的变更驱动组件的刷新(声明式)。

6、精确控制状态变量的关联组件数

合理控制状态更新范围,避免关联刷新较大范围或者渲染较慢的组件。

7、在对象上谨慎使用状态变量关联

理解@Prop和@ObjectLink的区别:@Prop是深拷贝,@ObjectLink是浅拷贝

所以在@Prop和@ObjectLink使用效果相同的场景下,优先使用@ObjectLink的方式减少系统内存开销。

相关推荐
xiaoqi9222 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
听麟2 小时前
HarmonyOS 6.0+ 智慧出行导航APP开发实战:离线地图与多设备位置协同落地
华为·wpf·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
jin1233224 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
2501_920931705 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
2501_921930836 小时前
高级进阶 React Native 鸿蒙跨平台开发:InteractionManager 交互优化
react native·harmonyos
前端不太难6 小时前
HarmonyOS PC 文档模型完整范式
华为·状态模式·harmonyos
ITUnicorn7 小时前
【HarmonyOS6】从零实现自定义计时器:掌握TextTimer组件与计时控制
华为·harmonyos·arkts·鸿蒙·harmonyos6
摘星编程8 小时前
OpenHarmony + RN:Stack堆栈导航转场
react native·react.js·harmonyos