مراحل الإنشاء والأداء
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
عند تحديث إطار في Compose، يمر بثلاث مراحل:
- المقطوعة الموسيقية: تحدّد ميزة "إنشاء" المحتوى الذي يتم عرضه. تقوم بتشغيل دوال قابلة للإنشاء
وبناء شجرة واجهة المستخدم.
- التنسيق: يحدّد Compose حجم كل عنصر وموضعه في شجرة واجهة المستخدم.
- رسم: يؤدي إنشاء النص إلى عرض عناصر واجهة المستخدم الفردية فعليًا.
يمكن لميزة "الكتابة" تخطّي أي من هذه المراحل بشكل ذكي إذا لم تكن ضرورية. على سبيل المثال، لنفترض أن عنصرًا رسوميًا واحدًا يبدّل بين أيقونتين بنفس الحجم. بما أن حجم هذا العنصر لا يتغير، ولا تتم إضافة أو إزالة أي عناصر من شجرة واجهة المستخدم، يمكن لـ Compose تخطي مرحلتي الإنشاء والتخطيط
وإعادة رسم هذا العنصر الواحد.
مع ذلك، قد تصعّب أخطاء البرمجة على Compose المراحل التي يمكن
تخطّيها بأمان، وفي هذه الحالة تعمل ميزة ComposeAllowed على المراحل الثلاث، ما قد يؤدي إلى إبطاء
واجهة المستخدم. لذا، فإن العديد من أفضل ممارسات الأداء هي مساعدة Compose
في تخطي المراحل التي لا يحتاج إلى القيام بها.
لمزيد من المعلومات، يمكنك الاطّلاع على دليل مراحل Jetpack Compose.
المبادئ العامة
هناك مبادئ واسعة يجب اتباعها لتحسين الأداء بشكل عام:
- إن أمكن، انقل العمليات الحسابية من الدوال القابلة للإنشاء.
قد تحتاج إلى إعادة تشغيل الدوال القابلة للإنشاء كلما تغيّرت واجهة المستخدم. تتم إعادة تنفيذ أي رمز تضعه في العنصر القابل للإنشاء، ومن المحتمل أن يتم ذلك لكل إطار
من الرسوم المتحركة. حصر التعليمة البرمجية للإنشاء بما يحتاج إليه فقط لإنشاء واجهة المستخدم.
- "تأجيل" قراءة الحالة لأطول فترة ممكنة عن طريق نقل قراءة الحالة إلى
مرحلة فرعية قابلة للإنشاء أو مرحلة لاحقة، يمكنك تقليل إعادة الإنشاء أو تخطي
مرحلة التركيب بالكامل. يمكنك إجراء ذلك عن طريق تمرير دوال 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."]]