布局性能优化

布局使用不当回导致卡顿、掉帧、响应慢等问题

一、布局流程

1、应用侧会根据前端UI描述创建后端的页面节点树，其中包含了处理UI组件属性更新、布局测算、事件处理等逻辑

2、页面节点树创建完成后，UI线程会对每个元素进行测算（Measure）和布局（Layout）来确定具体的位置和大小，其中Measure阶段负责确定组件对象的测量宽高；也就是该组件元素需要占用屏幕的大小，然后会在Layout阶段确定组件的最终宽高和四个顶点的位置。

3、确认了具体元素的节点信息位置后，会根据页面节点树生成当前的界面描述数据结构  ---  渲染树，渲染树由RenderNode渲染节点组成，描述了具体的元素在屏幕上的布局信息，包含大小、位置以及一些其他属性。

4、最后渲染服务的渲染线程会根据渲染树的信息执行相应的绘制工作。

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

二、优化布局结构的方法

1、精简节点数

移除冗余的节点

使用扁平化布局减少节点数（RelativeContainer、Grid布局等）

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

主要有两种控制方式，if条件渲染和visibility属性。

使用visibility属性控制场景：对性能要求较高并且会频繁切换元素的显示与隐藏的情况下

使用if条件渲染场景：如果组件的创建非常消耗资源，且不会立即使用，也并非频繁切换交互的情况下，只在特定条件下才