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