布局流程简介

布局性能优化方案

1、精简节点数

移除冗余节点

扁平化布局

使用更高级的布局使页面扁平化，如ReleativeContainer、Grid布局等。

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

下面对比两种显示/隐藏方式的性能消耗：

visibility模式下，无论是否显示，组件都会创建，因此Measure阶段，显示和隐藏的消耗差距不大。

if模式下，切换组件显示时性能消耗较高，因为创建了新的组件，重新进行了Measure和Layout阶段。

使用建议：

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

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

3、给定组件的宽高

在拖拽、缩放时，如果部分内容的大小不需要自适应，可以通过给对应的组件设置固定宽高，来减少Measure过程的耗时。

初次加载时耗时相差不大原因：首次加载情况下，所有组件都会参与布局过程。

重新绘制时，设置容器宽高耗时小的原因：对于未设置宽高/设置宽高百分比，外层容器宽高发生变化时，组件本身也会触发重新进行Measure过程，对组件的宽高进行重新测算，导致其布局时间很长。而设置了固定宽高的组件，则不会经过这一过程，而是直接使用初次绘制时保留的节点大小数据，减少了Measure的时间，这对于性能的提升是尤为明显的。

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

4、使用推荐的布局组件

高级布局提供了场景化的能力，解决一种或多种布局场景，但是在一些场景下不恰当的使用高级组件可能带来更多的性能消耗。

使用布局时尽量遵循以下原则：

• 在相同嵌套层级的情况下，如果多种布局方式可以实现相同布局效果，优选低耗时的布局，如使用Column、 Row替代Flex实现相同的单行布局:
• 在能够通过其他布局大幅优化节点数的情况下，可以使用高级组件替代，例如使用RelativeContainer替代Row、Column实现扁平化布局，此时其收益大于布局组件本身的性能差距;
• 仅在必要的场景下使用高耗时的布局组件，如使用Flex实现折行布局、使用Grid实现二维网格布局等。