如何合理使用动效来获得更好的性能

  1. 组件转场动画使用 transition

    • 推荐使用转场动画(transition)而不是组件动画(animateTo),因为 transition 只需要在条件改变时更新一次,而 animateTo 需要在动画前后做两次属性更新,导致性能开销更大。
    • 反例:通过改变透明度属性并使用 animateTo 来隐藏和显示组件。
    • 正例:直接使用 transition 动画,通过改变透明度实现组件的出现与消失。
 
  1. 组件布局改动时使用图形变换属性动画

    • 当需要改动组件的布局显示时,推荐使用图形变换属性(如平移、旋转、缩放)而不是改动布局属性(如 width、height、layoutWeight),因为图形变换不会重新触发布局,从而减少性能开销。
    • 反例:通过设置布局属性 width 和 height 来改变组件大小。
    • 正例:通过设置图形变换属性 scale 来改变组件大小。
 
  1. 动画参数相同时使用同一个 animateTo

    • 如果多个属性需要使用相同的动画参数进行动画处理,应该将它们合并到一个 animateTo 闭包中,以减少组件更新的次数。
    • 反例:将相同动画参数的状态变量更新放在不同的动画闭包中。
    • 正例:将相同动画参数的动画合并在一个动画闭包中。
 
  1. 多次 animateTo 时统一更新状态变量

    • 在执行多个 animateTo 之前,应该统一更新状态变量,避免在执行动画之间产生冗余的状态更新。
    • 反例:在两个 animateTo 之间更新状态变量。
    • 正例 1:在 animateTo 之前使用原始状态,让动画从原始状态过渡到指定状态。
    • 正例 2:在 animateTo 之前显式指定所有需要动画的属性初值,统一更新到节点中,然后再执行动画。

应用性能提升

1. 使用数据懒加载

 
在处理长列表数据时,传统的循环渲染方式会一次性加载所有列表元素,这会导致页面启动时间过长,影响用户体验,并增加服务器压力。为了解决这个问题,推荐使用 DataSource 来实现数据懒加载技术。通过懒加载,只有当数据进入可视区域时才加载和渲染,这样可以显著提高页面的响应速度和性能。
 

2. 设置 List 组件的宽高

 
在使用 Scroll 容器组件嵌套 List 组件加载长列表时,如果没有指定 List 的宽高尺寸,List 将会布局其所有子组件,这会导致性能问题。通过设置 List 的宽高,可以确保只布局 List 显示区域内的子组件,从而提高性能。
Scroll 嵌套 List 时:
  • List 没有设置宽高,会布局 List 的所有子组件。
  • List 设置宽高,会布局 List 显示区域内的子组件。
  • List 使用ForEach加载子组件时,无论是否设置 List 的宽高,都会加载所有子组件。
  • List 使用LazyForEach加载子组件时,没有设置 List 的宽高,会加载所有子组件,设置了 List 的宽高,会加载 List 显示区域内的子组件。

3. 使用条件渲染替代显隐控制

 
使用 visibility 属性控制组件的显隐状态时,即使组件不可见,它仍然会被重新创建,这会造成性能损耗。通过使用 if 条件渲染,可以避免组件的重新创建过程,从而提升性能。
 

4. 使用 Column/Row 替代 Flex

 
Flex 容器组件在默认情况下存在 shrink 属性,这可能导致二次布局,影响页面渲染性能。通过使用 Column 和 Row 组件替代 Flex,可以避免二次布局带来的性能问题。
 

5. 减少应用滑动白块

 
在应用中,滑动白块是一个常见的性能问题。通过增大 List/Grid 控件的 cachedCount 参数,可以预加载更多的 item,减少白块的出现。同时,如果需要请求网络图片,可以提前下载内容,以减少滑动时的白块现象。

状态管理优化

以下是文档中提到的一些关键点:
 
  1. 使用@ObjectLink 代替@Prop 减少不必要的深拷贝
在父子组件间传递数值时,如果子组件不需要改变状态变量的值,使用@ObjectLink 比@Prop 更优,因为@Prop 会导致深拷贝,增加性能开销。
 
  1. 不使用状态变量强行更新非状态变量关联组件:开发者应避免通过改变自定义的 UI 状态变量来带动常规变量的更新,而应将相关成员变量用@State 装饰,以便框架能够检测状态变化并触发 UI 更新。
 
  1. 精准控制状态变量关联的组件数:建议每个状态变量关联的组件数少于 20 个,以减少不必要的组件刷新,提高效率。
 
  1. 合理控制对象类型状态变量关联的组件数量:如果一个复杂对象被定义为状态变量,需要合理控制其关联的组件数,避免“冗余刷新”。
 
  1. 查询状态变量关联的组件数:可以使用 HiDumper 工具查看状态变量关联的组件数,进行性能优化。
 
  1. 避免在 for、while 等循环逻辑中频繁读取状态变量:应该在循环外面读取状态变量,避免在循环逻辑中频繁读取,以提高性能。
 

避免冗余操作

 
  1. 避免在高频回调中进行冗余操作:在处理如滚动事件、触摸事件等高频回调时,应避免在回调函数内部执行冗余的日志记录、Trace追踪和耗时操作。这些操作会严重影响应用的性能和响应速度。
 
  1. 删除冗余Trace和日志打印:在开发阶段,日志和Trace追踪是重要的辅助工具,但在发布版本中应移除这些冗余的输出,以避免不必要的性能开销。
 
  1. 避免设置冗余的系统回调监听:如果回调函数体内不包含任何业务逻辑代码,应将其删除。注册但未使用的回调会消耗系统资源,影响程序运行效率。
 

HarmonyOS 性能优化的更多相关文章

  1. 3D性能优化 | 说一说glTF文件压缩

    引言 最近做T级互动,需要使用到3D模型.相信大家和我一样,在开始着手的时候,一定会有这么些问题: 1.如何选择3D模型的导出格式 2.如何对模型文件进行优化 3.在大流量的项目中兼容性怎么样 让我们 ...

  2. 01.SQLServer性能优化之----强大的文件组----分盘存储

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...

  3. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  4. Web性能优化:What? Why? How?

    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...

  5. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  6. C#中那些[举手之劳]的性能优化

    隔了很久没写东西了,主要是最近比较忙,更主要的是最近比较懒...... 其实这篇很早就想写了 工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率 其实这对大多数程序猿 ...

  7. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  8. 02.SQLServer性能优化之---牛逼的OSQL----大数据导入

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 上一篇:01.SQLServer性能优化之----强大的文件组----分盘存储 http ...

  9. C++ 应用程序性能优化

    C++ 应用程序性能优化 eryar@163.com 1. Introduction 对于几何造型内核OpenCASCADE,由于会涉及到大量的数值算法,如矩阵相关计算,微积分,Newton迭代法解方 ...

  10. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

随机推荐

  1. 关于debian11无法安装星火商店的解决方法

    #!/bin/bash if [ "$(id -u)" != "0" ] then echo "请确保你使用root权限启动此脚本" exi ...

  2. 基于python的生理电信号采集的数据转换和处理软件

    一 前记 团队开发了几款生物电信号采集系统,可数据处理和转换工具刚开始用的都是matlab.这对一些客户来说,使用门槛还是有些高了.开发一套配套的软件,满足广大用户的需求,已经是迫在眉睫的事情了.最近 ...

  3. Java的Class类,注解与反射

    Class对象: 我们每创建一个类,经过build都会生成对应的.class文件 该类无法只能由虚拟机创建对象,其构造函数为private 当我们创建某个类的对象,ClassLoader(一个类)就会 ...

  4. FFmpeg命令行之ffmpeg调整音视频播放速度

    FFmpeg对音频.视频播放速度的调整的原理不一样.下面简单的说一下各自的原理及实现方式: 一.调整视频速率 视频的倍速主要是通过控制filter中的setpts来实现,setpts是视频滤波器通过改 ...

  5. C++ Qt开发:QTcpSocket网络通信组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QTc ...

  6. java 发送 http 请求练习两年半(HttpURLConnection)

    1.起一个 springboot 程序做 http 测试: @GetMapping("/http/get") public ResponseEntity<String> ...

  7. Three.js的基础使用

    1. 引言 Three.js是著名的JavaScript 3D图形库,用于浏览器中开发 3D 交互场景的 JS 引擎,可以快速的搭建三维场景 Three.js官网为:创建一个场景 – three.js ...

  8. 记录-VueJs中如何使用Teleport组件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件 但是从整个页面应用的视图上看, ...

  9. 基于logisim-D触发器设计四人抢答电路

    实验1:设计一个简易4人知识竞赛抢答电路,要求是: 裁判掌握一个按钮,作用是给电路复位和发出抢答开始命令;4名竞赛者各掌握一个按钮,每人对应一个指示灯,在主持人发出开始抢答命令后,哪位参赛者先按钮其对 ...

  10. 创业:大模型RAG系统三个月的开发心得和思考

    1. 前言 自从和员外上家公司离职后,我们就自己搞公司投入到了RAG大模型的AI产品应用的开发中,这中间有一个春节,前后的总时间大概是三个月左右,在这三个月期间,基本是昼夜兼程啊,到今天3月底结束,产 ...