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

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. في DevTools، انقر على علامة التبويب الأداء.
  2. تأكَّد من تفعيل مربّع الاختيار لقطات الشاشة .
  3. انقر على إعدادات الالتقاط . تكشف "أدوات المطوّر" عن الإعدادات ذات الصلة بطريقة تسجيل مقاييس الأداء.

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

    تم ضبط تقييد سرعة وحدة المعالجة المركزية (CPU) على 4 أضعاف.

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

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

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

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

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

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

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

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

    إنشاء ملف شخصي للصفحة التجريبية

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

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

    صفحة تقرير وضع العلامات

هذا العدد الكبير من البيانات. لا داعي للقلق، ستتضح لك الأمور قريبًا.

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

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

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

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

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

    الرسم البياني لعدد اللقطات في الثانية مميّزًا

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

    الرسم البياني لوحدة المعالجة المركزية وعلامة التبويب "ملخّص"

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

    عرض لقطة شاشة في تسجيل أداء

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

    تمرير مؤشر الماوس فوق إطار

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

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

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

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

  3. في لوحة العرض، فعِّل عرض إحصاءات العرض. يظهر تراكب جديد في أعلى يسار مجال العرض.

    مقياس عدد اللقطات في الثانية

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

تحديد النقطة التي تبطئ الأداء

بعد قياس أداء الصورة المتحركة والتأكّد من أنّه ليس جيدًا، يجب الإجابة عن السؤال التالي: ما السبب؟

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

    علامة التبويب "الملخّص"، مُحدَّدة باللون الأزرق

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

    القسم الرئيسي

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

    تم تكبير حدث واحد من أحداث "تم تنشيط إطار الصورة المتحركة".

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

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

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

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

  7. في علامة التبويب الملخّص، انقر على الرابط بجانب app.update @ ضمن طلب إطار متحركة. تنقلُك "أدوات مطوّري البرامج" إلى سطر الرمز البرمجي الذي فرض التنسيق.

    سطر الرمز البرمجي الذي أدّى إلى التنسيق القسري.

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

مكافأة: تحليل النسخة المحسّنة

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

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

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

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

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

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