أوقات عرض محتوى 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 عملية متعددة الخطوات باستخدام منحنيات spline وأنواع أخرى من العناصر المزعجة، على عكس التعتيم الذي من المفترض أن يكون من الأسهل عرضه.

الوقت المستغرَق لرسم عنصر يتضمّن خاصية 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 تؤثّر مباشرةً في أوقات رسم الصفحة.

المراجع