HarmonyOS-布局性能优化

布局流程

1. Measure阶段：测算，负责确定组件对象的测量宽、高。
2. Layout阶段：布局，确定组件的最终宽、高和四个顶点位置。

优化布局结构的方法

1. 精简节点数量，减少布局的消耗

   • 移除冗余节点。
   • 使用扁平化布局减少节点数。使用更高级的布局，例如：RelativeContainer，Grid布局等。

2. 合理控制元素显示与隐藏

   • if条件渲染
     • 如果组件的创建非常消耗资源，且不会立即使用，也并非频繁切换交互的情况下，只在特定条件下才会出现时，可以通过if条件渲染来进行内容的显示与隐藏控制，达到懒加载的效果。
   • visibility
     • 在对性能要求较高，并且会频繁切换元素的显示与隐藏的情况下，应该避免使用if条件判断，可以使用visibility组件。

3. 给定组件的宽高，减少Measure阶段的耗时

   • 对于组件的宽高不需要自适应的情况下，当其组件外部的容器尺寸发生改变时，建议给定组件的宽高数值。能够减少由于容器尺寸的变化造成的重新测算过程的性能。

4. 根据使用场景优先使用推荐的布局组件

   • 在节点数和层级相同的情况下，使用基础组件如column和row容器的性能明显高于其他布局，flex布局性能明显低于基础组件。
   • 在相同嵌套层级的情况下，如果多种布局方式可以实现相同的布局效果，优先选择低耗时的布局，如column，row替代flex。
   • 在能够通过其他布局大幅度优化节点数的情况下，可以使用高级组件替代，如RelativeContainer替代row，column实现扁平化布局，此时其收益大于布局组件本身的性能差异。
   • 仅在必要的场景下使用高耗时的布局组件，如Flex实现折行、使用Grid实现二维网格布局等。