تحليل أداء وقت التشغيل

يشير "أداء وقت التشغيل" إلى مستوى أداء الصفحة عند تشغيلها، بدلاً من تحميل الصفحة. يعلّمك هذا البرنامج التعليمي كيفية استخدام لوحة "أداء أدوات مطوري البرامج في Chrome" لتحليل أداء وقت التشغيل. في ما يتعلق بنموذج RAIL، تعد المهارات التي تتعلمها في هذا البرنامج التعليمي مفيدة لتحليل مراحل الاستجابة والرسوم المتحركة والخمول لصفحتك.

البدء

في هذا الدليل التوجيهي، يمكنك فتح "أدوات مطوري البرامج" على صفحة مباشرة واستخدام لوحة "الأداء" للعثور على المؤثِّر السلبي في الأداء على الصفحة.

1. افتح Google Chrome في وضع التصفّح المتخفي. يضمن وضع التصفّح المتخفي تشغيل Chrome في حالة خالية من أي مشاكل. على سبيل المثال، إذا كان لديك العديد من الإضافات مثبّتة، قد يتسبّب ذلك في حدوث تشويش في قياسات الأداء.

2. تحميل الصفحة التالية في نافذة التصفح المتخفي. هذا هو العرض التوضيحي الذي ستذهب إليه. تعرض الصفحة مجموعة من المربّعات الزرقاء الصغيرة تتحرك للأعلى وللأسفل.

   https://googlechrome.github.io/devtools-samples/jank/

3. اضغط على Command+Option+I (Mac) أو Control+Shift+I (Windows وLinux) لفتح أدوات مطوّري البرامج.

   

   الشكل 1. العرض التوضيحي على اليسار و"أدوات مطوري البرامج" على اليسار

محاكاة وحدة المعالجة المركزية (CPU) للأجهزة الجوّالة

تتمتع الأجهزة المحمولة بقدرة وحدة معالجة مركزية (CPU) أقل بكثير من أجهزة الكمبيوتر المكتبية والمحمولة. عند إنشاء ملف شخصي لصفحة، استخدِم ميزة تقييد وحدة المعالجة المركزية (CPU) لمحاكاة مستوى أداء صفحتك على الأجهزة الجوّالة.

1. في "أدوات مطوري البرامج"، انقر على علامة التبويب الأداء.
2. تأكّد من تفعيل مربّع الاختيار لقطات الشاشة.
3. انقر على إعدادات الالتقاط . تكشف "أدوات مطوري البرامج" عن الإعدادات المتعلقة بكيفية تسجيل مقاييس الأداء.

4. في وحدة المعالجة المركزية (CPU)، اختَر إبطاء السرعة 2x. تفرض أدوات مطوّري البرامج قيودًا على أداء وحدة المعالجة المركزية (CPU) حتى تصبح أبطأ بمقدار مرتين من المعتاد.

   

   الشكل 2. تقييد وحدة المعالجة المركزية (CPU) باللون الأزرق

إعداد العرض التوضيحي

من الصعب إنشاء عرض توضيحي للأداء في وقت التشغيل يعمل باتساق مع جميع قراء موقع الويب هذا. يتيح لك هذا القسم تخصيص العرض التوضيحي لضمان توافق تجربتك نسبيًا مع لقطات الشاشة والأوصاف التي تظهر لك في هذا البرنامج التعليمي، بغض النظر عن طريقة الإعداد الخاصة بك.

1. استمِر في النقر على إضافة 10 حتى تتحرك المربّعات الزرقاء أبطأ بشكل ملحوظ من ذي قبل. على جهاز متطور، قد يستغرق الأمر حوالي 20 نقرة.

2. انقر على تحسين. يجب أن تتحرك المربعات الزرقاء بشكل أسرع وأكثر سلاسة.

3. انقر على إلغاء التحسين. تتحرك المربعات الزرقاء أبطأ مع زيادة البيانات غير الضرورية مرة أخرى.

تسجيل أداء وقت التشغيل

عند تشغيل النسخة المحسَّنة من الصفحة، تتحرك المربّعات الزرقاء بشكل أسرع. Why is that?‎ من المفترض أن تحرك كلتا النسختين كل مربع بنفس مقدار المساحة في نفس الفترة الزمنية. يمكنك تسجيل تسجيل في لوحة "الأداء" لمعرفة كيفية اكتشاف المؤثِّر السلبي في الأداء في الإصدار غير المحسَّن.

1. في "أدوات مطوري البرامج"، انقر على تسجيل . تقيس أدوات مطوري البرامج مقاييس الأداء أثناء تشغيل الصفحة

   

   الشكل 3: تحليل خصائص الصفحة

2. انتظر بضع ثوانٍ.

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

   

   الشكل 4: نتائج الملف الشخصي

رائع، هذا كمية هائلة من البيانات. لا داعي للقلق، ستفهم المسألة بشكل أفضل قريبًا.

تحليل النتائج

بعد الحصول على تسجيل لأداء الصفحة، يمكنك قياس مستوى أداء الصفحة وتحديد الأسباب.

تحليل اللقطات في الثانية

إنّ المقياس الرئيسي لقياس أداء أي صورة متحركة هو عدد اللقطات في الثانية (FPS). يكون المستخدمون سعداء عندما يتم تشغيل الرسوم المتحركة بسرعة 60 لقطة في الثانية.

1. انظر إلى الرسم البياني لعدد اللقطات في الثانية. عندما يظهر شريط أحمر أعلى عدد اللقطات في الثانية، هذا يعني أنّ عدد اللقطات في الثانية انخفض إلى حد كبير، ما قد يؤثر سلبًا في تجربة المستخدم. بشكل عام، كلما زاد الشريط الأخضر، زادت الإطارات في الثانية.

   

   الشكل 5: رسم بياني لعدد اللقطات في الثانية المحدّد باللون الأزرق

2. أسفل الرسم البياني عدد اللقطات في الثانية، يظهر لك الرسم البياني وحدة المعالجة المركزية (CPU). تتوافق ألوان الرسم البياني وحدة المعالجة المركزية (CPU) مع الألوان في علامة التبويب الملخص أسفل لوحة الأداء. وعندما يكون مخطط وحدة المعالجة المركزية (CPU) ممتلئًا بالألوان، يعني ذلك أنّ وحدة المعالجة المركزية (CPU) وصلت إلى أقصى حد ممكن أثناء التسجيل. كلما رأيت وصول وحدة المعالجة المركزية إلى الحد الأقصى لفترات طويلة، يساعدك ذلك على إيجاد طرق لتنفيذ مهام أقل.

   

   الشكل 6: رسم بياني لوحدة المعالجة المركزية (CPU) وعلامة التبويب "ملخّص" محدّدَين باللون الأزرق

3. مرِّر مؤشر الماوس فوق الرسوم البيانية عدد اللقطات في الثانية أو وحدة المعالجة المركزية (CPU) أو NET. تعرض أدوات مطوري البرامج لقطة شاشة للصفحة في تلك المرحلة الزمنية. حرِّك الماوس يمينًا ويسارًا لإعادة تشغيل التسجيل. وهذا ما يسمى بالتنقيح، وهو مفيد لتحليل تقدم الرسوم المتحركة يدويًا.

   

   الشكل 7: عرض لقطة شاشة للصفحة حول علامة 2000 ملي ثانية للتسجيل

4. في قسم الإطارات، مرّر مؤشر الماوس فوق أحد المربعات الخضراء. يعرض لك DevTools عدد اللقطات في الثانية لذلك الإطار المعين. ومن المحتمل أن يكون كل إطار أقل بكثير من الهدف وهو 60 لقطة في الثانية.

   

   الشكل 8: التمرير فوق إطار

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

ميزة إضافية: فتح مقياس عدد اللقطات في الثانية

ومن الأدوات المفيدة الأخرى مقياس عدد اللقطات في الثانية، الذي يوفر تقديرات لعدد اللقطات في الثانية أثناء تشغيل الصفحة.

1. اضغط على Command+Shift+P (Mac) أو Control+Shift+P (Windows وLinux) لفتح قائمة الأوامر.
2. ابدأ في كتابة Rendering في قائمة الأوامر وحدد إظهار العرض.

3. في علامة التبويب العرض، فعِّل مقياس عدد اللقطات في الثانية. سيظهر تراكب جديد في أعلى يسار إطار العرض.

   

   الشكل 9: مقياس عدد اللقطات في الثانية

4. أوقِف مقياس عدد اللقطات في الثانية واضغط على مفتاح Escape لإغلاق علامة التبويب العرض. لن تستخدمها في هذا البرنامج التعليمي.

العثور على المؤثِّر السلبي

الآن بعد أن قمت بقياس والتحقق من أن الرسوم المتحركة لا تعمل بشكل جيد، فإن السؤال التالي الذي يجب الإجابة عنه هو: لماذا؟

1. دوِّن علامة تبويب الملخص. في حال عدم اختيار أي أحداث، تعرض علامة التبويب هذه تصنيفًا للأنشطة. تم عرض الصفحة معظم الوقت. نظرًا لأن الأداء هو فن القيام بعمل أقل، فإن هدفك هو تقليل مقدار الوقت الذي تقضيه في القيام بعمل العرض.

   

   الشكل 10: علامة التبويب "ملخّص" موضّحة باللون الأزرق

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

   

   الشكل 11: القسم الرئيسي محدّد باللون الأزرق

3. هناك الكثير من البيانات في التسجيل. يمكنك تكبير حدث Animation Frame API واحد من خلال النقر مع الاستمرار وسحب الماوس فوق نظرة عامة، وهو القسم الذي يتضمّن الرسوم البيانية لعدد اللقطات في الثانية ووحدة المعالجة المركزية (CPU) وNET. يعرض القسم الرئيسي وعلامة التبويب ملخّص معلومات عن الجزء المحدّد من التسجيل فقط.

   

   الشكل 12: تم تكبيره على حدث واحد تم تنشيط إطار رسوم متحركة

4. لاحظ المثلث الأحمر في أعلى يسار حدث تم تنشيط إطار الصورة المتحركة. كلما رأيت مثلثًا أحمر، يشير ذلك إلى احتمال وجود مشكلة متعلّقة بهذا الحدث.

5. انقر على حدث تم تنشيط إطار الصورة المتحركة. تعرض لك علامة التبويب ملخص الآن معلومات حول ذلك الحدث. لاحظ رابط العرض. يؤدي النقر على أدوات مطوّري البرامج إلى تمييز الحدث الذي بدأ حدث تم تنشيط إطار الصورة المتحركة. لاحظ أيضًا الرابط app.js:94. يؤدي النقر على ذلك إلى نقلك إلى السطر ذي الصلة في رمز المصدر.

   

   الشكل 13: مزيد من المعلومات حول حدث تم تنشيط إطار الصورة المتحركة

6. ضمن حدث app.update، تتوفّر مجموعة من الأحداث باللون الأرجواني. إذا كانت أعرض، فيبدو أن كل منها قد يحتوي على مثلث أحمر عليها. انقر على أحد أحداث التنسيق الأرجوانية الآن. توفِّر أدوات مطوّري البرامج المزيد من المعلومات حول الحدث في علامة التبويب ملخّص. في الواقع، هناك تحذير بشأن عمليات إعادة التدفق الإلزامية (كلمة أخرى للتخطيط).

7. في علامة التبويب ملخّص، انقر على الرابط app.js:70 ضمن فرض التصميم. ينقلك DevTools إلى سطر التعليمة البرمجية الذي فرض التنسيق.

   

   الشكل 13: سطر الرمز الذي تسبب في إنشاء التنسيق المفروض

أخيرًا! كان ذلك كثيرًا لتستوعبه، ولكن لديك الآن أساس متين في سير العمل الأساسي لتحليل أداء وقت التشغيل. رائع.

ميزة إضافية: تحليل النسخة المُحسَّنة

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

الخطوات التالية

يعتبر نموذج RAIL أساس فهم الأداء. يعلمك هذا النموذج بمقاييس الأداء الأكثر أهمية للمستخدمين. راجع قياس الأداء باستخدام نموذج RAIL لمزيد من المعلومات.

للحصول على مزيد من الراحة في لوحة "الأداء"، فإن التدريب خير وسيلة للإتقان. حاول تحديد خصائص صفحاتك وتحليل النتائج. إذا كانت لديك أي أسئلة عن نتائجك، يُرجى فتح سؤال "تجاوز تسلسل استدعاء الدوال البرمجية" الذي تم وضع علامة google-chrome-devtools عليه. قم بتضمين لقطات شاشة أو روابط إلى صفحات قابلة لإعادة الإنتاج، إن أمكن.

ولكي تصبح خبيرًا في أداء وقت التشغيل، يجب أن تتعلم كيف يترجم المتصفح HTML وCSS وJS إلى وحدات بكسل على الشاشة. أفضل مكان للبدء هو نظرة عامة على أداء العرض. تشرح قناة The Anatomy Of A Frame تفاصيل أكثر.

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

• تحسين تنفيذ JavaScript
• تقليل نطاق العمليات الحسابية للأنماط ودرجة تعقيدها
• تجنُّب التنسيقات الكبيرة والمعقدة واستهلاك التنسيق
• تبسيط درجة تعقيد الطلاء وتقليل مناطق الطلاء
• الالتزام بالخصائص المكوّنة فقط وإدارة عدد الطبقات
• رفض معالِجات الإدخال