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

Kayce Basques

يشير أداء الصفحة في وقت التشغيل إلى مستوى أداء الصفحة عند تشغيلها، مقارنةً بأداء الصفحة. يشرح لك هذا البرنامج التعليمي كيفية استخدام لوحة الأداء في "أدوات مطوري البرامج في 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) قد وصلت إلى الحد الأقصى خلال التسجيل. كلما رأيت وصول وحدة المعالجة المركزية (CPU) إلى الحد الأقصى لفترات طويلة، يكون التلميح إلى إيجاد طرق لتنفيذ مهام أقل.

   

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

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

   

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

4. في قسم الإطارات، مرِّر مؤشر الماوس فوق أحد المربعات الخضراء. تعرض لك أدوات مطوّري البرامج عدد اللقطات في الثانية لذلك الإطار المحدد. ومن المحتمل أن يكون كل إطار أقل بكثير من المعدل المستهدف وهو 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 Fired واحد من خلال النقر مع الاستمرار على مؤشر الماوس فوق نظرة عامة، وهو القسم الذي يتضمّن الرسومات البيانية للقطات في الثانية ووحدة المعالجة المركزية (CPU) وNET. يعرض القسم الرئيسي وعلامة التبويب ملخّص معلومات الجزء المحدد من التسجيل فقط.

   

   الشكل 12: تم تكبير حدث واحد تم تنشيط إطار صورة متحركة

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

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

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