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

Colt McAnlis

مقدمة

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

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

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

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

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

من خلال هذا الإعداد، ننشئ مجموعة من صفحات 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 (لضمان عدم تأثّر التوقيتات بأي حالات قديمة في عمليات إعادة تحميل الصفحة)، ويتم التقاط صورة Skia (*.SKP) لتقييم أوامر Skia المستخدَمة لرسم الصفحة. بعد إنشاء ملفات SKP لكل ملف HTML، نُشغِّل دفعة أخرى لإرسال ملفات ‎ *.SKP من خلال تطبيق Skia Benchmark (الذي تم إنشاؤه من رمز 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" للتعرّف على خصائص CSS التي تكلّفك الكثير.
  2. يمكنك دمج مراجعات CSS في عملية مراجعة الرمز البرمجي الحالية لرصد المشاكل في الأداء ابحث عن الأماكن في CSS التي تستخدم فيها عناصر معروفة بأنّها أكثر تكلفة، مثل التدرجات والظلال. اسأل نفسك، هل أحتاج حقًا إلى هذه هنا؟
  3. إذا كانت لديك شكوك، اختَر دائمًا الأداء الأفضل. قد لا يتذكر المستخدمون عرض المساحة المتروكة في الأعمدة، لكنهم سيتذكرون شعورهم عند زيارة موقعك.

الأفكار الختامية

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

المراجع