Compose 階段和效能
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Compose 更新影格時,會經歷三個階段:
- 組合:Compose 會決定要顯示的「內容」。並且會執行可組合函式並建構 UI 樹狀結構。
- 版面配置:Compose 會決定 UI 樹狀結構中每個元素的大小和位置。
- 繪圖:Compose 實際上會「算繪」個別 UI 元素。
Compose 可以視需求有意略過任何階段。舉例來說,假設單一圖形元素會在相同大小的兩個圖示之間進行切換。由於這個元素不會改變大小,且不會新增或移除 UI 樹狀結構中的元素,因此 Compose 可以略過組合和版面配置階段,重新繪製這個元素。
不過,程式設計錯誤可能會導致 Compose 難以判斷哪些階段可以安全略過,在這種情況下,Compose 會執行全部三個階段,這可能會拖慢 UI。因此,許多效能最佳做法都是協助 Compose 略過不必要的階段。
詳情請參閱 Jetpack Compose 階段指南。
一般原則
一般來說,改善效能時需遵守以下幾項大原則:
- 請盡可能將計算結果移出可組合函式。每當 UI 變更時,就可能需要重新執行可組合函式。您放入可組合項中的任何程式碼都會重新執行,可能針對動畫的每個影格重新執行。將可組合項的程式碼限制為建構 UI 所需的程式碼。
- 盡可能延遲狀態讀取。將狀態讀取移至子項可組合項或後續階段,即可盡量減少重組,或完全略過組合階段。為此,您可以傳遞 lambda 函式 (而不是頻繁變更狀態的狀態值),以及在傳遞頻繁變更的狀態時優先使用 lambda 輔助鍵。您可以在「遵循最佳做法」的「盡可能延遲讀取時間」一節中,查看這項技巧的範例。
其他資源
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Compose phases and performance\n\nWhen Compose updates a frame, it goes through three phases:\n\n- **Composition:** Compose determines *what* to show. It runs composable functions and builds the UI tree.\n- **Layout:** Compose determines the size and placement of each element in the UI tree.\n- **Drawing:** Compose actually *renders* the individual UI elements.\n\nCompose can intelligently skip any of those phases if they aren't needed. For\nexample, suppose a single graphic element swaps between two icons of the same\nsize. Since this element isn't changing size, and no elements of the UI tree are\nbeing added or removed, Compose can skip over the composition and layout phases\nand redraw this one element.\n\nHowever, coding mistakes can make it hard for Compose to know which phases it\ncan safely skip, in which case Compose runs all three phases, which can slow\ndown your UI. So, many of the performance best practices are to help Compose\nskip the phases it doesn't need to do.\n\nFor more information, see the [Jetpack Compose Phases](/develop/ui/compose/phases) guide.\n\nGeneral principles\n------------------\n\nThere are a couple of broad principles to follow that can improve performance in\ngeneral:\n\n- **Whenever possible, move calculations out of your composable functions.** Composable functions might need to be rerun whenever the UI changes. Any code you put in the composable gets re-executed, potentially for every frame of an animation. Limit the composable's code to only what it needs to build the UI.\n- **Defer state reads for as long as possible.** By moving state reading to a child composable or a later phase, you can minimize recomposition or skip the composition phase entirely. You can do this by passing lambda functions instead of the state value for frequently changing state and by preferring lambda-based modifiers when you pass in frequently changing state. You can see an example of this technique in the [Defer reads as long as possible](/develop/ui/compose/performance/bestpractices#defer-reads) section of [Follow best practices](/develop/ui/compose/performance/bestpractices).\n\nAdditional Resources\n--------------------\n\n- **[App performance guide](/topic/performance/overview)**: Discover best practices, libraries, and tools to improve performance on Android.\n- **[Inspect Performance](/topic/performance/inspecting-overview):** Inspect app performance.\n- **[Benchmarking](/topic/performance/benchmarking/benchmarking-overview):** Benchmark app performance.\n- **[App startup](/topic/performance/appstartup/analysis-optimization):** Optimize app startup.\n- **[Baseline profiles](/baseline-profiles):** Understand baseline profiles."]]