ArkUI性能优化

前言

         布局存在的问题：

        布局优化的目的：

        提升用户体验，提高应用的可用性和吸引力。

        测算Measure：负责确定组件对象的测量宽/高。

        布局：确定组件的最终宽/高和四个顶点的位置。

一、布局流程简介

         在ArkUI布局过程中，应用侧会根据前端UI描述创建后端的页面节点树，其中包含了处理UI组件属性更新、布局测算、事件处理等逻辑。在这个过程中，UI线程会对每个元素进行测算和布局，来确定具体的位置和大小。其中Measure阶段负责确定组件对象的测量宽高，也就是该组件元素需要占用屏幕的大小。然后会在Layout阶段确定组件的最终宽高和四个顶点的位置，确定了元素的具体位置信息后，会根据页面节点树生成当前的界面描述数据结构，即渲染树。

        渲染树由RenderNode渲染节点组成，描述了具体元素在屏幕上的布局信息，包含大小、位置以及一些其他属性，最后渲服务的渲染线程会根据渲染树的信息执行相应的绘制工作。

        在布局阶段中，若视图嵌套层级深、节点数过多，会导致在Measure和Layout过程中，通过遍历测量组件大小和边界的时间过长，造成额外的计算。所以优化布局性能可以从减少节点数或减少测算布局耗时方面来考虑。

二、优化布局结构的方法                 

        1、精简节点数

        真正影响布局性能的因素是参与布局的节点数量，所以在进行布局时，应该尽量减少参与布局的节点数，来减少布局的性能消耗。

        减少总节点数，主要有移除冗余的节点；使用扁平化布局减少节点数。

        扁平化布局示例图：

        2、控制元素隐藏与显示

         a、在对性能要求较高，并且会频繁切换元素的显示与隐藏的情况下，应该避免使用if判断，改用通过visibility的属性控制；

        b、如果组件的创建非常耗资源，且不会立即使用，也并非频繁切换的情况下，只有在特定的条件下才会出现时，可以通过if条件渲染来进行内容的显示与隐藏控制，达到懒加载的效果。

        3、给定组件的宽高

        对于组件的宽高不需要自适应的情况下，当其组件外部的容器尺寸发生变化时，建议给定组件的宽高数值。

        4、使用推荐的布局组件 

        a、在相同嵌套层级的情况下，如果多种布局方式可以实现相同的效果，优选低耗时的布局，如使用Column、Row替代Flex实现相同的单行布局；

        b、在能够通过其他布局大幅优化节点数的情况下，可以使用高级组件替代，例如使用RelativeContainer替代Row实现扁平化布局；

        c、仅在必要的场景下使用高耗时的布局组件，如使用Flex实现折行布局。