أوقات عرض محتوى CSS ومقدار عرض الصفحة

Colt McAnlis

مقدمة

إذا كنت من النوع الذي يواكب المواضيع، مثل طريقة عمل المتصفّحات، يعني ذلك أنّك تعرف أنّ هناك بعض المقالات الرائعة التي تناولت مؤخرًا تفاصيل حول التشغيل المركَّب/العارض المسرّع لوحدة معالجة الرسومات في Chrome. أولاً، العرض المسرَّع في Chrome: نموذج الطبقات هو مقدمة رائعة حول كيفية استخدام Chrome لمفهوم الطبقات لرسم صفحاتها. وللتعمق أكثر، يناقش التجميع السريع عبر GPU في Chrome كيفية استخدام Chrome لهذه الطبقات، إلى جانب وحدة معالجة الرسومات لعرض صفحتك.

السؤال الفلسفي

بعد أن أمضيت وقتًا طويلاً في كتابة أدوات تحويل البيانات إلى برامج لأغراض ثلاثية الأبعاد، تبيّن لي أنّ بعض مواقع CSS يجب أن تتضمّن أداءً متفاوتًا عند رسم صفحتك. على سبيل المثال، يعد تحويل الصورة الصغيرة على الشاشة عملية خوارزمية مختلفة تمامًا حيث ترسم ظلاً خلفيًا على شكل عشوائي. وبالتالي، أصبح السؤال: كيف تؤثر سمات CSS المختلفة في عرض حجم صفحتك؟

كان هدفي هو تصنيف مجموعة كبيرة من خصائص/قيم CSS حسب مدة عرضها، كي نتمكّن من فهم أنواع خصائص CSS الأكثر أداءً من غيرها. لتحقيق هذا الهدف، كتبت بعض عمليات التشغيل الآلي باستخدام شريط أنبوبي وعلكة فقاعية لمحاولة إضافة مستوى رؤية عددي إلى أوقات عرض محتوى CSS، وهو الأمر الذي نجح على النحو التالي:

  • إنشاء مجموعة من صفحات HTML الفردية؛ حيث يحتوي كل صفحة على عنصر DOM واحد وتعديلات خصائص CSS المرتبطة بها.
  • شغِّل بعض النصوص البرمجية المبرمَجة التي ستؤدي في كل صفحة إلى:
    • تشغيل Chrome
    • تحميل صفحة
    • إنشاء صورة Skia للصفحة
    • شغِّل كل صورة Skia التي تم التقاطها من خلال Skia يليبل للحصول على التوقيت.
  • تخلص من كل التوقيتات، وتعجب بالأرقام. (هذا الجزء مهم...)

باستخدام هذا الإعداد، ننشئ مجموعة من صفحات HTML، حيث تحتوي كل صفحة على تباديل فريد لخصائص وقيم CSS؛ على سبيل المثال، إليك ملفي html:

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

وهناك خطوة أخرى أكثر تعقيدًا

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

في ما يلي، كصيغة من المثال الأخير، حيث نُغيّر فقط قيمة التدرج الشعاعي:

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

بعد ذلك، يتم تحميل كل صفحة إلى نسخة افتراضية جديدة من Chrome (للتأكّد من أنّ التوقيتات لم يتم انحيازها بطريقة ما بالاستناد إلى أي حالات قديمة في عمليات إعادة تحميل الصفحة)، ويتم استخدام صورة Skya (*.SKP) لتقييم أوامر Skia المستخدمة لطلاء الصفحة. بعد إنشاء ملفات SKP لكل ملف HTML، نشغّل دفعة أخرى لإرسال ملفات *.SKP من خلال تطبيق Skia e بإعادة النظر (الذي تم إنشاؤه من رمز مصدر Skia) ما يقلِّل متوسط الوقت المستغرَق لعرض تلك الصفحة.

تقييم البيانات

وبناءً على ذلك، لدينا الآن بعض القدرة التقريبية على رسم رسم بياني مقدار ما تتطلبه مجموعة من خصائص CSS للرسم. أو بدلاً من ذلك، يمكننا البدء في ترتيب خصائص CSS حسب أداء الرسم الخاص بها. في ما يلي رسم بياني كبير تم التقاطه باستخدام الإصدار التجريبي من Chrome 27 ويعرض جميع البيانات الكاملة للتوقيت من هذه العملية. تجدُر الإشارة إلى أنّ جميع البيانات عرضة للتغيير حيث يصبح Chrome أسرع وأسرع بمرور الوقت.

توقيتات جميع التبديلات في الاختبار

ويمثل كل شريط عمودي وقت عرض صفحة تشتمل على مجموعة واحدة من خصائص CSS (يتم تضخيمها بمقدار 100 مرة، وقيمة المقياس الحقيقي لهذا الرسم البياني هي 0,1.56 ملي ثانية). الكثير من الخطوط الجميلة، ولكن في هذا الشكل لا تكون مفيدة إلى حد ما؛ ونحتاج إلى إجراء بعض التنقيب عن البيانات للعثور على اتجاهات مفيدة.

نعثر أولاً على دليل على أنّ عرض بعض خصائص CSS هو تكلفة أعلى من غيرها. على سبيل المثال، يتضمن رسم تظليل القطرات على عنصر DOM عملية تمرير متعدد تحتوي على شرائح وأنواع أخرى من الأشياء البذيئة، على عكس التعتيم الذي ينبغي أن يكون أسهل في العرض.

الوقت المستغرق لرسم عنصر يحتوي على خاصية CSS واحدة فقط

ثانيًا، والأكثر إثارة للاهتمام، يمكن أن تستغرق مجموعات خصائص CSS وقت عرض أكبر من مجموع أجزائها. من منظور المراقب، يعد هذا غريبًا بعض الشيء، حيث نتوقع أن تكون A+B = C، وليس 2.2C. على سبيل المثال، إضافة box-shadow وborder-radius-stroke :

توقيتات جميع التبديلات في الاختبار

ما يثير الاهتمام حقًا في هذا الصدد أنّ الأمر لا يقتصر على السمة box-shadow نفسها، بل تبادل القيمة المحدَّد. على سبيل المثال، يعرض ما يلي مجموعة من box-shadow : 50% وborder-radius مع اختلافات في القيمة.

توقيتات جميع التبديلات في الاختبار

بعد الاطّلاع على البيانات، يستمر هذا الأمر لفترة من الوقت. هناك الكثير من المجموعات الغريبة والمختلفة، وتجدُر الإشارة إلى أنّ مجموعة الاختبار التي أستخدمها لا تناسب جميع هذه الاحتمالات، إذ لا يزال هناك الكثير من الاختبارات والتركيبات التي يمكن أن تسفر عن نتائج مثيرة للاهتمام.

العثور على حجم عرض الصفحة

بفضل إمكانية تتبّع أوقات عرض كل عنصر على صفحتك، يستطيع المطوّرون بدء تقييم معدّل عرض الصفحات ومدى تأثير ذلك على سرعة استجابة موقعك الإلكتروني. وفي ما يلي بعض النصائح لمساعدتك في البدء.

  1. استخدِم وضع "الطلاء المستمر" في Chrome ضمن "أدوات مطوّري برامج Chrome" للتعرُّف على خصائص CSS التي تكلفك.
  2. دمج مراجعات CSS في عملية مراجعة الرموز الحالية لرصد مشاكل الأداء ابحث عن الأماكن في CSS التي تستخدم فيها منتجات يُعرف أنّها أكثر تكلفة، مثل التدرجات والظلال. اسأل نفسك، هل أحتاج فعلاً إلى هذه العناصر هنا؟
  3. عندما تكون في شكوك، يخطئ دائمًا في جانب تحسين الأداء. قد لا يتذكر المستخدمون عرض المساحة المتروكة على أعمدتك، ولكنهم سيتذكرون الشعور عند زيارة موقعك.

الأفكار النهائية

وأحد الأشياء الأكثر إثارة للاهتمام حول هذه التجربة هو أن التوقيتات ستستمر في التغير مع كل إصدار من إصدارات Chrome (ونأمل أن يصبح أسرع ،) أن برنامج المتصفح هو مساحة دائمة التغيّر. البيانات البطيئة اليوم، قد تكون سريعة غدًا. يمكنك استبعاد هذه المقالة لتجنّب إضافة عنصر box-shadow: 1px 2px 3px 4px يتضمّن border-radius:5. مع ذلك، من المفترض أن تكون الخلاصة الأكثر قيمة هي أنّ خصائص CSS تؤثر مباشرةً في عدد مرات عرض محتوى صفحتك.

المراجع