التزم بخصائص المكوِّن فقط وإدارة عدد الطبقات

التركيب هو المكان الذي يتم فيه تجميع الأجزاء المطلية من الصفحة معًا لعرضها على الشاشة.

التركيب هو المكان الذي يتم فيه تجميع الأجزاء المطلية من الصفحة معًا لعرضها على الشاشة.

هناك عاملان رئيسيان في هذا المجال يؤثران في أداء الصفحة: عدد الطبقات التي يجب إدارتها، والخصائص التي تستخدمها للصور المتحركة.

ملخّص

  • التزم بتحويل تغييرات معدل الشفافية وتعتيم الرسوم المتحركة.
  • روِّج للعناصر المتحركة باستخدام will-change أو translateZ.
  • تجنَّب الإفراط في استخدام قواعد الترويج، لأنّ الطبقات تتطلب الذاكرة والإدارة.

استخدام تغييرات التحويل والتعتيم للصور المتحركة

يتجنّب الإصدار الأفضل أداءً من مسار البكسل كلاً من التنسيق والطلاء، ولا يتطلّب سوى إدخال التغييرات:

مسار وحدات البكسل بدون تصميم أو طلاء.

من أجل تحقيق ذلك، ستحتاج إلى الالتزام بتغيير الخصائص التي يمكن للمؤلف وحده التعامل معها. في الوقت الحالي، يتوفّر خاصيتان فقط ينطبق عليهما، وهما transform وopacity:

الخصائص التي يمكنك تحريكها بدون تشغيل تنسيق أو طلاء

يجب الانتباه لاستخدام transforms وopacity في أنّ العنصر الذي يتم تغيير هذه الخصائص عليه يجب أن يكون على طبقة التركيب الخاصة به. من أجل إنشاء طبقة، يجب عليك ترقية العنصر، والتي سنتناولها بعد ذلك.

الترويج للعناصر التي تخطط لتحريكها

كما ذكرنا في قسم "تبسيط تعقيد الطلاء وتقليل مناطق الرسم"، يجب الترويج للعناصر التي تخطّط لتحريكها (مع مراعاة عدم المبالغة في ذلك) على طبقتها الخاصة:

.moving-element {
  will-change: transform;
}

أما بالنسبة إلى المتصفحات القديمة أو المتصفحات غير المتوافقة، فسيتم تغيير ما يلي:

.moving-element {
  transform: translateZ(0);
}

تحكَّم في الطبقات وتجنَّب انفجارات الطبقات

قد يكون من المغري بعد ذلك معرفة أن الطبقات تساعد في أغلب الأحيان في الأداء، للترويج لجميع العناصر على صفحتك باستخدام شيء مثل ما يلي:

* {
  will-change: transform;
  transform: translateZ(0);
}

وهي طريقة دائرية للتعبير عن رغبتك في الترويج لكل عنصر على الصفحة. المشكلة هنا هي أن كل طبقة تقوم بإنشائها تتطلب ذاكرة وإدارة، وهذا ليس مجانيًا. في الواقع، على الأجهزة ذات الذاكرة المحدودة يمكن أن يتفوق التأثير على الأداء بشكل كبير على أي فائدة لإنشاء طبقة. يجب تحميل زخارف كل طبقة إلى وحدة معالجة الرسومات، وبالتالي هناك قيود إضافية من حيث معدل نقل البيانات بين وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات، والذاكرة المتاحة للزخارف على وحدة معالجة الرسومات.

استخدام "أدوات مطوري البرامج في Chrome" لفهم الطبقات في تطبيقك

زر الإيقاف/التفعيل لميزة محلّل عرض الرسم في "أدوات مطوري البرامج في Chrome"

لكي تتعرّف على الطبقات في تطبيقك وسبب احتواء العنصر على طبقة، عليك تفعيل محلّل نسخ الألوان في المخطط الزمني لـ "أدوات مطوري البرامج في Chrome":

عندما يكون هذا الخيار مفعّلاً، عليك تسجيل فيديو. عند انتهاء التسجيل، ستتمكن من النقر على إطارات فردية، والتي توجد بين أشرطة اللقطات في الثانية والتفاصيل:

الإطار الذي يريد المطوّر تحليله

سيؤدي النقر فوق هذا إلى ظهور خيار جديد في التفاصيل: علامة تبويب الطبقة.

زر علامة تبويب الطبقة في "أدوات مطوري البرامج في Chrome"

سيُظهر هذا الخيار طريقة عرض جديدة تتيح لك تحريك جميع الطبقات ومسحها ضوئيًا وتكبيرها أثناء ذلك الإطار، بالإضافة إلى أسباب إنشاء كل طبقة.

عرض الطبقة في "أدوات مطوري البرامج في Chrome"

باستخدام طريقة العرض هذه، يمكنك تتبع عدد الطبقات لديك. إذا كنت تقضي الكثير من الوقت في التركيب أثناء إجراءات بالغة الأهمية مثل التمرير أو الانتقالات (يجب أن تسعى إلى 4 إلى 5 ملي ثانية تقريبًا)، يمكنك استخدام المعلومات الواردة هنا لمعرفة عدد الطبقات لديك وسبب إنشائها وكيفية إدارة أعداد الطبقات في تطبيقك منها.