布局使用不當回導致卡頓、掉幀、響應慢等問題

一、布局流程

1、應用側會根據前端UI描述創(chuàng)建后端的頁面節(jié)點樹，其中包含了處理UI組件屬性更新、布局測算、事件處理等邏輯

2、頁面節(jié)點樹創(chuàng)建完成后，UI線程會對每個元素進行測算（Measure）和布局（Layout）來確定具體的位置和大小，其中Measure階段負責確定組件對象的測量寬高；也就是該組件元素需要占用屏幕的大小，然后會在Layout階段確定組件的最終寬高和四個頂點的位置。

3、確認了具體元素的節(jié)點信息位置后，會根據頁面節(jié)點樹生成當前的界面描述數據結構? ---? 渲染樹，渲染樹由RenderNode渲染節(jié)點組成，描述了具體的元素在屏幕上的布局信息，包含大小、位置以及一些其他屬性。

4、最后渲染服務的渲染線程會根據渲染樹的信息執(zhí)行相應的繪制工作。

在布局中若視圖嵌套層級深，節(jié)點數過多，會導致Measure和Layout的過程中，通過遍歷測量組件大小和邊界的時間過長，造成額外的計算。所以可以從減少節(jié)點樹或減少測算布局耗時方面來優(yōu)化布局性能

二、優(yōu)化布局結構的方法

1、精簡節(jié)點數

移除冗余的節(jié)點

使用扁平化布局減少節(jié)點數（RelativeContainer、Grid布局等）

2、合理控制元素的顯示與隱藏

主要有兩種控制方式，if條件渲染和visibility屬性。

使用visibility屬性控制場景：對性能要求較高并且會頻繁切換元素的顯示與隱藏的情況下

使用if條件渲染場景：如果組件的創(chuàng)建非常消耗資源，且不會立即使用，也并非頻繁切換交互的情況下，只在特定條件下才會出現(xiàn)時，使用if條件渲染達到懶加載的效果。

3、能夠在初期給定寬高的組件，在進行UI描述時，盡量給定寬高的大小，能夠減少由于容器尺寸變化造成的重新測算過程的性能

4、合理使用布局組件

使用高級組件條件：因為基礎組件能夠保持良好的性能，在一些情況下使用高級組件能夠大大減少嵌套節(jié)點層數和節(jié)點數，其帶來的性能提升反而高于組件本身的性能消耗。

• 在相同嵌套層級的情況下，如果多種布局方式可以實現(xiàn)相同布局效果，優(yōu)選低消耗布局，例如使用Column、Row代替Flex實現(xiàn)相同的單行布局
• 能夠通過其他布局大幅度優(yōu)化節(jié)點數的情況下，可以使用高級組件代替，今天帶來更好的性能收益
• 僅在必要的場景下使用高耗時的布局組件，如使用Flex實現(xiàn)折行布局、使用Grid實現(xiàn)二維網格布局等。