تبسيط تعقيد الطلاء وتقليل مناطق الطلاء

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

ملخّص

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