布局使用不當(dāng)回導(dǎo)致卡頓、掉幀、響應(yīng)慢等問題

一、布局流程

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

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

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

4、最后渲染服務(wù)的渲染線程會(huì)根據(jù)渲染樹的信息執(zhí)行相應(yīng)的繪制工作。

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

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

1、精簡節(jié)點(diǎn)數(shù)

移除冗余的節(jié)點(diǎn)

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

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

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

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

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

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

4、合理使用布局組件

使用高級(jí)組件條件：因?yàn)榛A(chǔ)組件能夠保持良好的性能，在一些情況下使用高級(jí)組件能夠大大減少嵌套節(jié)點(diǎn)層數(shù)和節(jié)點(diǎn)數(shù)，其帶來的性能提升反而高于組件本身的性能消耗。

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