HarmonyOS(57) UI性能优化

性能优化是APP开发绕不过的话题，那么在HarmonyOS开发过程中怎么进行性能优化呢？今天就来总结下相关知识点。

UI性能优化

1、避免在组件的生命周期内执行高耗时操作
2、合理使用ResourceManager
3、优先使用@Builder方法代替自定义组件
4、@Component组件和@Builder的区别
5、参考资料

1、避免在组件的生命周期内执行高耗时操作

HarmonyOS自定义组件的生命周期如下图：
在这里插入图片描述
如上图所示，自定义组件在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。因此，应尽量避免在自定义组件的生命周期内执行高耗时操作，在aboutToAppear()生命周期函数内建议只做当前组件的初始化逻辑。
解决思路：对于复杂计算的耗时场景，可以将计算结果进行缓存处理。对于不需要等待结果的高耗时任务，可以采用多线程处理该任务，通过并发的方式避免主线程阻塞。

2、合理使用ResourceManager

在生命周期aboutToAppear中应该避免使用ResourceManager的getXXXSync接口入参中直接使用资源信息，推荐使用资源id作为入参，推荐用法为：resourceManager.getStringSync($r('app.string.test').id)。

aboutToAppear(): void {//反例getContext().resourceManager.getStringSync($r('app.string.app_name'));//推荐用法getContext().resourceManager.getStringSync($r('app.string.app_name').id);}

uilder_20">3、优先使用@Builder方法代替自定义组件

如下图，在build阶段将在后端FrameNode树创建一个相应的CustomNode节点，在渲染阶段时也会创建对应的RenderNode节点，如下图所示
在这里插入图片描述

前端UI描述结构会在后端创建相应的FrameNode节点树；每个树节点和前端UI组件是一一对应的关系
FrameNode节点树主要用于处理UI组件属性更新、布局测算、事件处理等业务逻辑；
CustomNode作为FrameNode的子类，用于处理自定义组件相关业务逻辑，比如执行build函数。
FrameNode节点树在渲染阶段生成后端渲染树进行UI渲染。

所以当在页面上大量使用自定义组件时，会成倍增加FrameNode节点树上CustomNode类型的节点数量，增加页面创建和渲染时长。因此，在满足业务需求的前提下，可以优先使用@builder函数代替自定义组件。

uilder_29">4、@Component组件和@Builder的区别

自定义组件和自定义构建函数（@Builder）的主要区别如下：

自定义构建函数（@Builder）更轻量，其作为UI元素抽象的方法，实现和调用相较于自定义组件比较简洁。
在自定义组件中，可以定义成员函数/变量、自定义组件生命周期等。自定义构建函数（@Builder）不支持定义状态变量和自定义生命周期。
在自定义组件中，可直接通过状态变量的改变，来驱动UI的刷新。而自定义构建函数（@Builder）默认的按值参数传递方式不支持动态改变组件，当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新，要实现UI动态刷新需要按引用传递参数。
在自定义组件中要实现插槽功能，需要使用@Builder和@BuiderParams实现。具体实现可参考：@BuilderParam装饰器：引用@Builder函数。
自定义构建函数（@Builder）中使用了自定义组件，那么该方法每次被调用时，对应的自定义组件均会重新创建。
整体上，自定义组件在实际应用开发场景中更加通用、灵活。自定义构建函数（@Builder）由于不支持定义变量和生命周期等限制，在使用场景上灵活性受限，多用在插槽或系统提供的组件/方法里面属性传值类型为Builder类型场景中。