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