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

يشير "التجميع" إلى عملية تجميع الأجزاء المرسومة من الصفحة لعرضها على الشاشة.

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

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

ملخّص

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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