Các giai đoạn và hiệu suất của Compose
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Khi Compose cập nhật một khung, tính năng này sẽ trải qua ba giai đoạn:
- Thành phần kết hợp: Compose xác định nội dung sẽ hiển thị. Thư viện này chạy các hàm có khả năng kết hợp và xây dựng cây giao diện người dùng.
- Bố cục: Compose xác định kích thước và vị trí của từng phần tử trong cây giao diện người dùng.
- Bản vẽ: Compose thực sự hiển thị các thành phần riêng lẻ trên giao diện người dùng.
Compose có thể bỏ qua bất kỳ giai đoạn nào trong số đó một cách thông minh nếu không cần thiết. Ví dụ: hãy giả sử một phần tử đồ hoạ hoán đổi giữa hai biểu tượng có cùng kích thước. Vì phần tử này không thay đổi kích thước và không có phần tử nào trên cây giao diện người dùng được thêm hoặc xoá, nên Compose có thể bỏ qua các giai đoạn thành phần và bố cục cũng như vẽ lại một phần tử này.
Tuy nhiên, lỗi lập trình có thể khiến Compose khó biết được giai đoạn nào có thể bỏ qua một cách an toàn. Trong trường hợp đó, Compose sẽ chạy cả ba giai đoạn, điều này có thể làm chậm giao diện người dùng. Vì vậy, nhiều phương pháp hay nhất về hiệu suất là để giúp Compose bỏ qua các giai đoạn mà nó không cần làm.
Để biết thêm thông tin, hãy xem hướng dẫn về Các giai đoạn trong Jetpack Compose.
Nguyên tắc chung
Có một số nguyên tắc chung mà bạn có thể áp dụng để cải thiện hiệu suất chung:
- Nếu có thể, hãy di chuyển các phép tính ra khỏi các hàm có khả năng kết hợp.
Bạn có thể cần chạy lại các hàm có khả năng kết hợp bất cứ khi nào giao diện người dùng thay đổi. Bất kỳ mã nào bạn đưa vào thành phần kết hợp đều sẽ được thực thi lại, có thể đối với mọi khung hình của ảnh động. Giới hạn mã của thành phần kết hợp chỉ ở những gì cần thiết để tạo giao diện người dùng.
- Trì hoãn việc đọc trạng thái càng lâu càng tốt. Bằng cách di chuyển đọc trạng thái sang một thành phần kết hợp con hoặc giai đoạn sau, bạn có thể giảm thiểu quá trình kết hợp lại hoặc bỏ qua hoàn toàn giai đoạn kết hợp. Bạn có thể thực hiện việc này bằng cách truyền các hàm lambda thay vì giá trị trạng thái để trạng thái thường xuyên thay đổi, cũng như ưu tiên đối tượng sửa đổi dựa trên lambda khi bạn chuyển ở trạng thái thay đổi thường xuyên. Bạn có thể xem ví dụ về kỹ thuật này trong phần Trì hoãn việc đọc càng lâu càng tốt của bài viết Làm theo các phương pháp hay nhất.
Tài nguyên khác
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],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."]]