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