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

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

Paul Lewis

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

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

ملخّص

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

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

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

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

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

ملاحظة: إذا كنت قلقًا من أنّك قد لا تتمكّن من حصر الصور المتحركة بهذه السمات فقط، اطّلِع على مبدأ FLIP الذي قد يساعدك في إعادة تخصيص المؤثرات الحركية للتغييرات في التحويلات ودرجة التعتيم من السمات الأكثر تكلفة.

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

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

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

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

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

إدارة الطبقات وتجنُّب حدوث انفجارات الطبقات

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

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

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

تحذير : لا يُسمح بالترويج للعناصر بدون داعٍ.

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

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

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

سيقدم لك النقر فوق هذا خيارًا جديدًا في التفاصيل: علامة تبويب الطبقة.

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

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