运动网站源码精美网站设计欣赏

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

一、布局流程

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

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

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

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

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

二、优化布局结构的方法

1、精简节点数

移除冗余的节点

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

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

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

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

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

3、能够在初期给定宽高的组件，在进行UI描述时，尽量给定宽高的大小，能够减少由于容器尺寸变化造成的重新测算过程的性能

4、合理使用布局组件

使用高级组件条件：因为基础组件能够保持良好的性能，在一些情况下使用高级组件能够大大减少嵌套节点层数和节点数，其带来的性能提升反而高于组件本身的性能消耗。

• 在相同嵌套层级的情况下，如果多种布局方式可以实现相同布局效果，优选低消耗布局，例如使用Column、Row代替Flex实现相同的单行布局
• 能够通过其他布局大幅度优化节点数的情况下，可以使用高级组件代替，今天带来更好的性能收益
• 仅在必要的场景下使用高耗时的布局组件，如使用Flex实现折行布局、使用Grid实现二维网格布局等。