يشير أداء وقت التشغيل إلى مستوى أداء صفحتك أثناء تشغيلها، وليس أثناء تحميلها. يشرح لك هذا الدليل المفصّل كيفية استخدام لوحة "الأداء" في "أدوات مطوّري البرامج في Chrome" لتحليل أداء وقت التشغيل. فيما يتعلق بنموذج RAIL، فإن المهارات التي تتعلمها في هذا البرنامج التعليمي مفيدة لتحليل مراحل الاستجابة والصور المتحركة والخمول لصفحتك.
البدء
في هذا الدليل التعليمي، سنستخدم لوحة الأداء للعثور على نقطة عرقلة في الأداء على صفحة منشورة. للبدء:
- افتح Google Chrome في وضع التصفّح المتخفي. يضمن وضع التصفّح المتخفي تشغيل Chrome في حالة نظيفة. على سبيل المثال، إذا كانت لديك الكثير من الإضافات المثبَّتة، قد تؤدي هذه الإضافات إلى إدخال تشويش في قياسات الأداء.
حمِّل الصفحة التالية في نافذة التصفّح المتخفي. هذا هو الإصدار التجريبي الذي ستُجري تحليلاً له. تعرض الصفحة مجموعة من المربعات الزرقاء الصغيرة التي تتحرك للأعلى وللأسفل.
https://googlechrome.github.io/devtools-samples/jank/اضغط على Command+Option+I (نظام التشغيل Mac) أو Control+Shift+I (نظاما التشغيل Windows وLinux) لفتح "أدوات المطوّر".
محاكاة وحدة معالجة مركزية للأجهزة الجوّالة
تمتلك الأجهزة الجوّالة طاقة وحدة معالجة مركزية أقل بكثير من أجهزة الكمبيوتر المكتبي وأجهزة الكمبيوتر المحمول. عند إنشاء ملف شخصي لصفحة، استخدِم تقييد وحدة المعالجة المركزية لمحاكاة أداء صفحتك على الأجهزة الجوّالة.
- في "أدوات المطوّرين"، انقر على علامة التبويب الأداء.
- تأكّد من أنّ مربّع الاختيار لقطات الشاشة مفعّل.
- انقر على إعدادات الالتقاط. تكشف "أدوات مطوري البرامج" عن الإعدادات المتعلقة بكيفية تسجيلها لمقاييس الأداء.
في حالة وحدة المعالجة المركزية (CPU)، اختَر بطء عمل بمقدار 4 مرات. تعمل أدوات المطوّرين على إبطاء وحدة المعالجة المركزية لكي تعمل ببطء 4 مرات أكثر من المعتاد.
إعداد العرض التوضيحي
من الصعب إنشاء عرض توضيحي لأداء وقت التشغيل يعمل بشكلٍ متسق لجميع قراء هذا الموقع الإلكتروني. يتيح لك هذا القسم تخصيص الإصدار التجريبي لضمان أن تكون تجربتك متسقة نسبيًا مع لقطات الشاشة والأوصاف التي تظهر لك في هذا الدليل التعليمي، بغض النظر عن إعداداتك المحدّدة.
- يُرجى مواصلة النقر على إضافة 10 إلى أن تتحرك المربعات الزرقاء بشكل أبطأ بشكل ملحوظ من ذي قبل. على جهاز عالي الأداء، قد يستغرق ذلك 20 نقرة تقريبًا.
انقر على تحسين. من المفترض أن تتحرك المربعات الزرقاء بشكل أسرع وأكثر سلاسة.
انقر على إيقاف التحسين. تتحرّك المربعات الزرقاء ببطء أكبر وبشكل متقطّع مرة أخرى.
تسجيل أداء بيئة التشغيل
عند تشغيل النسخة المحسّنة من الصفحة، تتحرّك المربعات الزرقاء بشكل أسرع. ما السبب؟ من المفترض أن ينقل كلا الإصدارين كل مربّع بنفس المسافة في المدة الزمنية نفسها. سجِّل تسجيلًا في لوحة الأداء للتعرّف على كيفية رصد الأداء المنخفض في الإصدار غير المحسَّن.
في أدوات مطوري البرامج، انقر على تسجيل . تلتقط أدوات مطوري البرامج مقاييس الأداء أثناء تشغيل الصفحة.
انتظِر بضع ثوانٍ.
انقر على إيقاف. تتوقف أدوات المطوّرين عن التسجيل وتعالج البيانات، ثم تعرِض النتائج في لوحة الأداء.
رائع، هذه كمية هائلة من البيانات. لا داعي للقلق، ستتضح لك الأمور بعد قليل.
تحليل النتائج
بعد الحصول على تسجيل للأداء، يمكنك تحليل مدى سوء أداء الصفحة والعثور على الأسباب.
تحليل عدد اللقطات في الثانية
المقياس الرئيسي لقياس أداء أي صورة متحركة هو عدد اللقطات في الثانية (FPS). يسعد المستخدمون عندما يتم تشغيل الرسوم المتحركة بمعدّل 60 لقطة في الثانية.
اطّلِع على الرسم البياني لعدد اللقطات في الثانية. عندما يظهر لك شريط أحمر فوق عدد اللقطات في الثانية، يعني ذلك أنّ معدّل اللقطات في الثانية انخفض إلى مستوى منخفض جدًا لدرجة أنّه يؤثر على تجربة المستخدم.
أسفل الرسم البياني عدد اللقطات في الثانية، يظهر لك الرسم البياني وحدة المعالجة المركزية. تتطابق الألوان في الرسم البياني وحدة المعالجة المركزية مع الألوان في علامة التبويب ملخّص، في أسفل لوحة الأداء. إنّ ظهور الرسم البياني لوحدة المعالجة المركزية ملونًا بالكامل يعني أنّ وحدة المعالجة المركزية كانت تعمل بأقصى طاقتها أثناء التسجيل. عندما تلاحظ أنّ وحدة المعالجة المركزية تعمل بأقصى طاقتها لفترات طويلة، يعني ذلك أنّه عليك البحث عن طرق لإجراء عمل أقل.
مرِّر مؤشر الماوس فوق الرسم البياني عدد اللقطات في الثانية أو وحدة المعالجة المركزية أو الشبكة. تعرِض أدوات المطوّرين لقطة شاشة ل الصفحة في تلك المرحلة الزمنية. حرِّك الماوس يمينًا ويسارًا لإعادة تشغيل التسجيل. يُعرف هذا الإجراء باسم الترجيع السريع، وهو مفيد لتحليل مستوى تقدّم الصور المتحركة يدويًا.
في قسم اللقطات، مرِّر مؤشر الماوس فوق أحد المربّعات الخضراء. تعرِض لك أدوات المطوّرين عدد اللقطات في الثانية لهذا اللقطة المحدّدة. من المحتمل أنّ عدد اللقطات في الثانية لكل إطار أقل بكثير من المعدل المستهدَف البالغ 60 لقطة في الثانية.
من خلال هذا العرض التوضيحي، من الواضح أنّ أداء الصفحة ليس جيدًا. ولكن في السيناريوهات الحالية، قد لا يكون الأمر واضحًا جدًا، لذا من المفيد استخدام كل هذه الأدوات لإجراء القياسات.
ميزة إضافية: فتح مقياس عدد اللقطات في الثانية
ومن الأدوات المفيدة الأخرى مقياس عدد اللقطات في الثانية الذي يقدّم تقديرات في الوقت الفعلي لعدد اللقطات في الثانية أثناء عرض الصفحة.
- اضغط على Command+Shift+P (نظام التشغيل Mac) أو Control+Shift+P (نظام التشغيل Windows وLinux) لفتح قائمة الأوامر.
- ابدأ بكتابة
Renderingفي قائمة الأوامر واختَر عرض المعالجة. في لوحة العرض، فعِّل عرض إحصاءات العرض. سيظهر تراكب جديد في أعلى يسار إطار العرض.
أوقِف مقياس عدد اللقطات في الثانية واضغط على Escape لإغلاق لوحة العرض. لن تستخدمها في هذا البرنامج التعليمي.
العثور على المؤثِّر السلبي
بعد قياس أداء الصورة المتحركة والتأكّد من أنّه ليس جيدًا، يجب الإجابة عن السؤال التالي: ما السبب؟
لاحِظ علامة التبويب الملخّص. في حال عدم اختيار أيّ أحداث، تعرِض لك علامة التبويب هذه تصنيفًا للنشاط. استغرقت الصفحة معظم وقتها في العرض. بما أنّ الأداء هو فنّ إنجاز عمل أقل، فإنّ هدفك هو تقليل الوقت المستغرَق في عملية التقديم.
وسِّع قسم الرئيسي. تعرِض لك أدوات المطوّرين رسمًا بيانيًا للنشاط في سلسلة المهام الرئيسية، بمرور الوقت. يمثّل المحور السيني التسجيل بمرور الوقت. يمثّل كلّ شريط حدثًا. كلما كان عمود القياس أوسع، يعني ذلك أنّ الحدث استغرق وقتًا أطول. يمثّل المحور الصادي تسلسل استدعاء الدوال البرمجية. عندما تظهر لك الأحداث مكدسة فوق بعضها، يعني ذلك أنّ الأحداث العلوية تسبّبت في الأحداث السفلية.
يتضمّن التسجيل الكثير من البيانات. يمكنك تكبير حدث تم تشغيل إطار متحركة واحد من خلال النقر مع الاستمرار وسحب الماوس فوق نظرة عامة، وهو القسم الذي يتضمّن الرسوم البيانية عدد اللقطات في الثانية ووحدة المعالجة المركزية والشبكة. لا يعرضان سوى معلومات الجزء المحدّد من التسجيل في قسم الرئيسي وعلامة التبويب الملخّص.
لاحِظ المثلث الأحمر في أعلى يسار حدثَي المهمة وتنسيق الصفحة. كلما رأيت مثلثًا أحمر، هذا يعني أنه قد يكون هناك تحذير بأن هناك مشكلة متعلقة بهذا الحدث. يشير المثلث الأحمر على المهمة إلى أنّها كانت مهمة طويلة.
انقر على الحدث تم تشغيل إطار متحركة. تعرِض لك الآن علامة التبويب الملخّص معلومات عن هذا الحدث. يؤدي النقر على الرابط بجانب الحدث الذي بدأه إلى تمييز DevTools للحدث الذي بدأ حدث تم تنشيط إطار متحركة. لاحظ أيضًا الرابط app.update @. يؤدي النقر على هذا الرمز إلى نقلك إلى السطر ذي الصلة في رمز المصدر.
ضمن حدث app.update، هناك مجموعة من الأحداث باللون الأرجواني. إذا كانت أعرض، فسيبدو كما لو أن كل منها قد يحتوي على مثلث أحمر عليها. انقر على أحد أحداث التنسيق البنفسجي الآن. وتوفّر "أدوات مطوري البرامج" مزيدًا من المعلومات حول الحدث في علامة التبويب الملخّص. في الواقع، هناك تحذير بشأن عمليات إعادة التدفق الإجبارية (كلمة أخرى للتخطيط).
في علامة التبويب الملخّص، انقر على الرابط بجانب app.update @ ضمن إبطال التنسيق الأول. تنقلُك "أدوات مطوّري البرامج" إلى سطر الرمز البرمجي الذي فرض التنسيق.
أخيرًا! لقد كان هذا القسم مليئًا بالمعلومات، ولكن لديك الآن أساسًا متينًا في سير العمل الأساسي لتحليل أداء وقت التشغيل. أحسنت.
مكافأة: تحليل النسخة المحسّنة
باستخدام مهام سير العمل والأدوات التي تعلمتها للتو، انقر على تحسين في العرض التوضيحي لتفعيل الرمز المحسَّن، وإجراء تسجيل آخر للأداء، ثم تحليل النتائج. من معدل التحديث المُحسَّن للصور إلى انخفاض عدد الأحداث في الرسم البياني للمسار في القسم الرئيسي، يمكنك ملاحظة أنّ الإصدار المُحسَّن من التطبيق يُجري عددًا أقل بكثير من الإجراءات، ما يؤدي إلى تحقيق أداء أفضل.
الخطوات التالية
يشكّل نموذج RAIL أساس فهم الأداء. يعرّفك هذا النموذج على مقاييس الأداء الأكثر أهمية للمستخدمين. راجِع قياس الأداء باستخدام نموذج RAIL لمعرفة المزيد من المعلومات.
للشعور براحة أكبر مع لوحة الأداء، فإن التدريب خير وسيلة للإتقان. جرِّب إنشاء ملف شخصي
لصفحاتك وتحليل النتائج. إذا كانت لديك أي أسئلة حول النتائج، يمكنك فتح سؤال على Stack
Overflow مع وضع علامة google-chrome-devtools. يُرجى تضمين لقطات شاشة أو روابط إلى
الصفحات التي يمكن إعادة إنتاجها، إن أمكن.
لتصبح خبيرًا في أداء وقت التشغيل، يجب أن تتعلم كيف يترجم المتصفح HTML وCSS وJS إلى وحدات بكسل على الشاشة. أفضل مكان للبدء هو نظرة عامة على أداء العرض. وفي هذا الإطار، يمكنك الاطّلاع على تفاصيل أكثر تفصيلاً في فيديو The Anatomy Of A Frame.
أخيرًا، هناك العديد من الطرق لتحسين أداء وقت التشغيل. ركّز هذا البرنامج التعليمي على أحد نقاط الأداء المنخفضة المتعلّقة بالصور المتحركة بهدف تقديم جولة مركّزة من خلال لوحة "الأداء"، ولكنّه ليس سوى نقطة واحدة من نقاط الأداء المنخفضة العديدة التي قد تواجهها. وتتضمن بقية أجزاء سلسلة "أداء العرض" الكثير من النصائح المفيدة لتحسين الجوانب المختلفة لأداء وقت التشغيل، مثل: