الطلاء هو عملية ملء وحدات البكسل التي يتم دمجها في نهاية المطاف على شاشة المستخدم. وغالبًا ما تكون هذه العملية هي الأطول بين جميع المهام في مسار المعالجة، ولذلك يُنصح بتجنّبها إن أمكن.
ملخّص
- يؤدي تغيير أيّ خاصية باستثناء عمليات التحويل أو الشفافية إلى بدء عملية الرسم دائمًا.
- غالبًا ما يكون الطلاء هو الجزء الأكثر تكلفة في مسار معالجة وحدات البكسل. تجنَّب ذلك قدر الإمكان.
- يمكنك تقليل مساحات الطلاء من خلال ترقية الطبقات وتنسيق الصور المتحركة.
- استخدِم أداة تحليل عمليات الرسم في أدوات مطوّري البرامج في Chrome لتقييم تعقيد عمليات الرسم وتكلفتها، ويمكنك تقليلها كلما أمكن.
كيفية بدء وضع التنسيق والتلوين
في حال تنشيط التخطيط، سيتم تنشيط الطلاء دائمًا، لأنّ تغيير الشكل الهندسي لأي عنصر يعني أنّه يجب إصلاح وحدات البكسل الخاصة به.
يمكنك أيضًا بدء عملية الرسم إذا غيّرت الخصائص غير الهندسية، مثل الخلفيات أو لون النص أو الظلال. في هذه الحالات، لن يكون التنسيق مطلوبًا وستبدو عملية النقل على النحو التالي:
استخدام Chrome DevTools لتحديد نقاط الاختناق في عملية الرسم بسرعة
يمكنك استخدام Chrome DevTools لتحديد المناطق التي يتمّ رسمها بسرعة. افتح علامة التبويب "العرض" ثم فعِّل وميض الطلاء.
عند تفعيل هذا الخيار، سيُشعل Chrome ضوءًا أخضر على الشاشة عند حدوث عملية الرسم. إذا كانت الشاشة بأكملها تومض باللون الأخضر، أو إذا كانت تظهر لك مناطق من الشاشة لم تكن تتوقع أن يتم تلوينها، عليك إجراء مزيد من البحث.
شجِّع العناصر التي تتحرك أو تتلاشى.
لا يتم دائمًا إنشاء اللوحة في صورة واحدة في الذاكرة. في الواقع، من الممكن أن يرسم المتصفّح في صور متعددة أو طبقات تركيب، إذا لزم الأمر.
وتتمثل فائدة هذا الأسلوب في أنّه يمكن التعامل مع العناصر التي تتم إعادة رسمها بانتظام أو التي تتحرك على الشاشة باستخدام عمليات التحويل بدون التأثير في العناصر الأخرى. وهذا مشابه لما يحدث في حِزم الفن مثل Sketch أو GIMP أو Photoshop، حيث يمكن التعامل مع الطبقات الفردية ودمجها فوق بعضها لإنشاء الصورة النهائية.
إنّ أفضل طريقة لإنشاء طبقة جديدة هي استخدام سمة will-change CSS المتوفّرة في جميع محرّكات المتصفحات الحديثة الرئيسية. باستخدام القيمة transform، سينشئ will-change طبقة تركيب جديدة:
.moving-element {
will-change: transform;
}
ومع ذلك، يجب الحرص على عدم إنشاء عدد كبير جدًا من الطبقات، لأنّ كل طبقة تتطلّب ذاكرة وإدارة. تتوفّر مزيد من المعلومات حول هذا الموضوع في القسم الالتزام بالمواقع التي تتضمّن أداة تركيب فقط وإدارة عدد الطبقات.
إذا كنت قد صعّدت عنصرًا إلى طبقة جديدة، استخدِم "أدوات المطوّر" للتأكّد من أنّ هذا الإجراء قد ساعدك في تحسين الأداء. لا تروِّج للعناصر بدون إعداد ملف تعريف.
تقليل مساحات الطلاء
ومع ذلك، في بعض الأحيان، لا يزال من الضروري إجراء أعمال الطلاء، حتى في حال توفّر عناصر ترويجيّة. يتمثل أحد التحديات الكبيرة في مشاكل الطلاء في أنّ المتصفّحات تُدمج منطقتَين تحتاجان إلى الطلاء، ما قد يؤدي إلى إعادة طلاء الشاشة بالكامل. على سبيل المثال، إذا كان لديك عنوان ثابت في أعلى الصفحة، وكان يتم رسم عنصر في أسفل الشاشة، قد يتم إعادة رسم الشاشة بأكملها.
غالبًا ما يكون تقليل مساحات الطلاء عبارة عن عملية تنسيق للرسومات المتحرّكة والانتقالات كي لا تتداخل كثيرًا، أو إيجاد طرق لتجنّب إضافة تأثيرات متحركة إلى أجزاء معيّنة من الصفحة.
تبسيط تعقيدات الطلاء
عندما يتعلق الأمر بالرسم، تكون بعض الأشياء أكثر تكلفة من غيرها. على سبيل المثال، سيستغرق رسم أي شيء يتضمّن تمويهًا (مثل الظل) وقتًا أطول من رسم مربّع أحمر مثلاً. من ناحية CSS، لا يكون هذا واضحًا دائمًا: لا يبدو أنّ background: red; وbox-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); لهما خصائص أداء مختلفة جدًا، ولكنهما يختلفان.
كما هو موضّح في لقطة الشاشة السابقة، يتيح لك أداة تحليل الطلاء تحديد ما إذا كنت بحاجة إلى البحث عن طرق أخرى لتحقيق التأثيرات. اسأل نفسك ما إذا كان من الممكن استخدام مجموعة أنماط أرخص أو وسائل بديلة لتحقيق النتيجة النهائية.
ويجب تجنُّب استخدام ميزة "الطلاء" أثناء الرسوم المتحركة على وجه الخصوص، لأنّ 10 ملي ثانية التي تملكها لكل إطار لا تكون عادةً كافية لتنفيذ عمل الطلاء، خاصةً على الأجهزة الجوّالة.