مرجع ميزات الأداء

Kayce Basques

Sofia Emelianova

هذه الصفحة هي مرجع شامل لميزات "أدوات مطوّري البرامج في Chrome" ذات الصلة بتحليل الأداء.

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

تسجيل الأداء

يمكنك تسجيل وقت التشغيل أو أداء التحميل.

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

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

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. انقر على علامة التبويب الأداء في أدوات مطوّري البرامج.

3. انقر على رمز التسجيل .

   

4. تفاعل مع الصفحة. تسجِّل أدوات مطوّري البرامج جميع أنشطة الصفحة التي تحدث نتيجةً لتفاعلاتك.

5. انقر على تسجيل مرة أخرى أو انقر على إيقاف لإيقاف التسجيل.

أداء تحميل التسجيلات

سجِّل أداء التحميل عندما تريد تحليل أداء صفحة أثناء تحميلها، بدلاً من تحليل أدائها أثناء عرضها.

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. افتح لوحة الأداء في "أدوات مطوّري البرامج".

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

   

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

في هذا المثال، تعرض لوحة الأداء النشاط أثناء تحميل الصفحة.

التقاط لقطات شاشة أثناء التسجيل

فعِّل مربّع الاختيار لقطات الشاشة لالتقاط لقطة شاشة لكل لقطة أثناء التسجيل.

اطّلِع على عرض لقطة شاشة للتعرّف على كيفية التفاعل مع لقطات الشاشة.

فرض تجميع البيانات المهملة أثناء التسجيل

أثناء تسجيل صفحة، انقر على جمع المهملات ممسحة لفرض جمع المهملات.

عرض إعدادات التسجيل

انقر على إعدادات التسجيل لعرض المزيد من الإعدادات ذات الصلة بطريقة تسجيل DevTools لتسجيلات الأداء.

إيقاف عيّنات JavaScript

يعرض المسار الرئيسي للتسجيل تلقائيًا تسلسلات استدعاء تفصيلية لدوالّ JavaScript التي تمّ استدعاؤها أثناء التسجيل. لإيقاف تجميعات المكالمات هذه:

1. افتح قائمة إعدادات الالتقاط . اطّلِع على إظهار إعدادات التسجيل.
2. فعِّل مربّع الاختيار إيقاف عيّنات JavaScript.
3. سجِّل الصفحة.

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

يعرض هذا المثال تسجيلًا يتضمّن عيّنات JavaScript غير مفعّلة.

يعرض هذا المثال تسجيلًا يتضمّن عيّنات JavaScript مفعّلة.

خفض سرعة الاتصال بالإنترنت أثناء التسجيل

لتقليل سرعة الشبكة أثناء التسجيل:

1. افتح قائمة إعدادات الالتقاط . اطّلِع على إظهار إعدادات التسجيل.
2. اضبط الشبكة على المستوى المحدّد للتحكّم في السرعة.

تقييد أداء وحدة المعالجة المركزية (CPU) أثناء التسجيل

لتقييد أداء وحدة المعالجة المركزية أثناء التسجيل، اتّبِع الخطوات التالية:

1. افتح قائمة إعدادات الالتقاط . اطّلِع على إظهار إعدادات التسجيل.
2. اضبط وحدة المعالجة المركزية (CPU) على المستوى المحدّد من الحدّ من السرعة.

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

تفعيل إحصاءات أداة اختيار لغة CSS

للاطّلاع على إحصاءات أدوات اختيار قواعد CSS أثناء أحداث إعادة احتساب النمط التي تستغرق وقتًا طويلاً:

1. افتح قائمة إعدادات الالتقاط . اطّلِع على إظهار إعدادات التسجيل.
2. ضَع علامة في مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.

لمزيد من التفاصيل، اطّلِع على كيفية تحليل أداء أداة اختيار CSS أثناء أحداث إعادة احتساب الأسلوب.

تفعيل قياس سرعة العرض المتقدّم

لعرض بيانات قياس سرعة العرض التفصيلية:

1. افتح قائمة إعدادات الالتقاط . اطّلِع على إظهار إعدادات التسجيل.
2. ضَع علامة في مربّع الاختيار تفعيل قياس سرعة العرض المتقدّم.

للتعرّف على كيفية التفاعل مع معلومات الطلاء، اطّلِع على عرض الطبقات وعرض أداة تحليل ملفّات الطلاء.

حفظ تسجيل

لحفظ تسجيل، انقر بزر الماوس الأيمن واختَر حفظ الملف الشخصي.

تحميل تسجيل

لتحميل تسجيل، انقر بزر الماوس الأيمن واختَر تحميل الملف الشخصي.

محو التسجيل السابق

بعد إجراء تسجيل، اضغط على محو التسجيل لمحو هذا التسجيل من لوحة الأداء.

تحليل تسجيل أداء

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

التنقّل في التسجيل

لفحص تسجيل الأداء عن كثب، يمكنك اختيار جزء من التسجيل، والانتقال في الرسم البياني الطويل للأداء، والتكبير والتصغير، واستخدام علامات التنقّل للانتقال بين مستويات التكبير.

اختيار جزء من التسجيل

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

لاختيار جزء من التسجيل، انقر مع الاستمرار، ثم اسحب إلى اليمين أو اليسار في نظرة عامة على المخطط الزمني.

لاختيار جزء باستخدام لوحة المفاتيح:

1. ركِّز على المقطع الصوتي الرئيسي أو أي من المقاطع الصوتية المجاورة له.
2. استخدِم مفاتيح W وA وS وD للتكبير والانتقال لليسار والتصغير والانتقال لليسار، على التوالي.

لاختيار جزء باستخدام لوحة لمس:

1. مرِّر مؤشر الماوس فوق قسم نظرة عامة على المخطط الزمني أو أيّ من المقاطع الصوتية (الرئيسية والمقاطع المجاورة لها).
2. باستخدام إصبعين، مرِّر سريعًا للأعلى لتصغير المحتوى، ومرِّر سريعًا لليسار للانتقال لليسار، ومرِّر سريعًا للأسفل لتكبير المحتوى، ومرِّر سريعًا لليسار للانتقال لليسار.

إنشاء علامات مسار واستخدامها للانتقال بين مستويات التكبير/التصغير

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

لإنشاء مسار التنقل واستخدامه:

1. في نظرة عامة على المخطط الزمني، اختَر جزءًا من التسجيل.
2. مرِّر مؤشر الماوس فوق الجزء المحدّد وانقر على الزر N ms zoom_in. يتم توسيع التحديد لملء نظرة عامة على المخطط الزمني. تبدأ سلسلة من علامات التنقّل في أعلى نظرة عامة على المخطط الزمني.
3. كرِّر الخطوتَين السابقتَين لإنشاء مسار تنقل متداخل آخر. يمكنك مواصلة تداخل مسار التنقّل ما دام نطاق الاختيار أكبر من 5 مللي ثانية.
4. للانتقال إلى مستوى تكبير محدّد، انقر على مسار التنقّل المقابل في السلسلة في أعلى نظرة عامة على المخطط الزمني.

لإزالة الأقسام الفرعية لخيط التنقّل، انقر بزر الماوس الأيمن على خيط التنقّل الرئيسي واختَر إزالة أشرطة التنقّل الثانوية.

الانتقال للأعلى أو للأسفل في رسم بياني مفصّل لأداء الرموز

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

البحث في الأنشطة

يمكنك البحث في جميع الأنشطة في قناة الإصدار الرئيسية والطلبات في قناة الإصدار الشبكة.

لفتح مربّع بحث في أسفل لوحة الأداء، اضغط على:

• نظام التشغيل macOS: ‏ Command+F
• نظاما التشغيل Windows وLinux: ‏ Control+F

يعرض هذا المثال تعبيرًا عاديًا في مربّع البحث في أسفل الصفحة يبحث عن أي نشاط يبدأ بالرمز E.

للتنقل بين الأنشطة التي تتطابق مع طلب البحث:

• انقر على الزرَّين expand_less السابق أو expand_more التالي.
• اضغط على Shift+Enter لاختيار العنصر السابق أو Enter لاختيار العنصر التالي.

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

لتعديل إعدادات طلب البحث:

• انقر على match_case مطابقة حالة الأحرف لجعل طلب البحث حسّاسًا لحالة الأحرف.
• انقر على regular_expression التعبير العادي لاستخدام تعبير عادي في طلب البحث.

لإخفاء مربّع البحث، انقر على إلغاء.

تغيير ترتيب الأغاني وإخفاؤها

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

لنقل الأغاني وإخفائها:

1. للدخول إلى وضع الضبط، انقر بزر الماوس الأيمن على اسم مقطع صوتي واختَر ضبط المقاطع الصوتية.
2. انقر على arrow_upward للأعلى أو arrow_downward للأسفل لنقل مقطع صوتي للأعلى أو للأسفل. انقر على visibility_off لإخفائه.
3. عند الانتهاء، انقر على إنهاء إعداد قنوات الإصدار في أسفل الصفحة للخروج من وضع الضبط.

شاهِد الفيديو لمعرفة كيفية تنفيذ سير العمل هذا.

تحفظ لوحة الأداء إعدادات التتبّع للعمليات الجديدة، ولكن ليس في جلسات أدوات مطوّري البرامج التالية.

عرض نشاط سلسلة التعليمات الرئيسية

استخدِم المسار الرئيسي لعرض النشاط الذي حدث في سلسلة المحادثات الرئيسية للصفحة.

انقر على حدث للاطّلاع على مزيد من المعلومات عنه في علامة التبويب الملخّص. تُحدِّد لوحة الأداء الحدث المحدّد باللون الأزرق.

يعرض هذا المثال مزيدًا من المعلومات عن حدث استدعاء الدالة get في علامة التبويب الملخّص.

قراءة الرسم البياني المفصّل لأداء الرموز

تمثّل لوحة الأداء نشاط سلسلة المحادثات الرئيسية في مخطّط بياني للوقود. يمثّل المحور السيني التسجيل بمرور الوقت. يمثّل المحور الصادي تسلسل استدعاء الدوال البرمجية. تؤدي الأحداث في الأعلى إلى حدوث الأحداث في الأسفل.

يعرض هذا المثال رسمًا بيانيًا للوقود في المقطع الرئيسي. تسبّب حدث click في طلب دالة مجهولة. واستدعت هذه الدالة بدورها onEndpointClick_، التي استدعت handleClick_، وهكذا.

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

يتم أيضًا تمييز المهام الطويلة بمثلث أحمر، ويتم وضع مظلّلة باللون الأحمر على الجزء الذي يستغرق أكثر من 50 ملي ثانية:

في هذا المثال، استغرقت المهمة أكثر من 400 ملي ثانية، لذا تم وضع مظلّل أحمر على الجزء الذي يمثّل آخر 350 ملي ثانية، في حين لم يتم وضع مظلّل على المدة الافتتاحية التي تبلغ 50 ملي ثانية.

بالإضافة إلى ذلك، يعرض المسار الرئيسي معلومات عن الملفات الشخصية لوحدة المعالجة المركزية التي تم تشغيلها وإيقافها باستخدام وظيفتَي وحدة التحكّم profile() وprofileEnd().

لإخفاء مخطّط "الشرارة" التفصيلي لطلبات JavaScript، اطّلِع على إيقاف عيّنات JavaScript. عند إيقاف عيّنات JavaScript، لن تظهر لك سوى الأحداث ذات المستوى العالي، مثل Event (click) وFunction Call.

تتبُّع مُشغّلي الأحداث

يمكن أن يعرض المقطع الصوتي الرئيسي أسهمًا تربط بين المشغّلات التالية والأحداث التي تسبّبت فيها:

• عدم صلاحية النمط أو التنسيق -> إعادة احتساب الأنماط أو التنسيق
• طلب إطار صورة متحركة -> تم تنشيط إطار الصورة المتحركة
• طلب معاودة الاتصال غير المستخدَمة -> تنشيط معاودة الاتصال غير المستخدَمة
• تثبيت الموقّت -> تم تنشيط الموقّت
• إنشاء WebSocket -> إرسال... وتلقّي تأكيد الاتصال بخادم WebSocket أو محو WebSocket

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

عند اختيار علامة التبويب "الملخّص"، تعرض روابط المشغِّل للمشغِّلين وروابط الشخص الذي بدأ للأحداث التي تسبّبوا فيها. انقر عليها للانتقال بين الأحداث المقابلة.

إخفاء الدوالّ وعناصرها الثانوية في مخطّط "الشرارة"

لإزالة الازدحام في مخطّط "المسارات الأكثر استخدامًا" في سلسلة المحادثات الرئيسية، يمكنك إخفاء الدوالّ المحدّدة أو الدوالّ الفرعية لها:

1. في المقطع الصوتي الرئيسي، انقر بزر الماوس الأيمن على دالة واختَر أحد الخيارات التالية أو اضغط على الاختصار المقابل:

   • إخفاء الدالة (H)
   • إخفاء العناصر الثانوية (C)
   • إخفاء العناصر الثانوية المتكرّرة (R)
   • إعادة ضبط العناصر الثانوية (U)
   • إعادة ضبط عملية التتبّع (T)
   • إضافة نص برمجي إلى قائمة التجاهل (I)

   

   يظهر زر القائمة المنسدلة arrow_drop_down بجانب اسم الدالة التي تحتوي على عناصر فرعية مخفية.

2. للاطّلاع على عدد العناصر الفرعية المخفية، مرِّر مؤشر الماوس فوق الزر المنسدلة arrow_drop_down.

   

3. لإعادة ضبط دالة تتضمّن عناصر فرعية مخفية أو الرسم البياني الكامل للمسار، اختَر الدالة واضغط على U أو انقر بزر الماوس الأيمن على أي دالة واختَر إعادة ضبط التتبُّع على التوالي.

تجاهُل النصوص البرمجية في الرسم البياني للمسار

لإضافة نص برمجي إلى قائمة التجاهل، انقر بزر الماوس الأيمن على نص برمجي في الرسم البياني واختَر إضافة نص برمجي إلى قائمة التجاهل.

يُجمِّع الرسم البياني النصوص البرمجية التي تم تجاهلها ويصنّفها على أنّها في قائمة التجاهل ويضيفها إلى قواعد الاستبعاد المخصّص في الإعدادات الإعدادات > قائمة التجاهل. يتم حفظ النصوص البرمجية التي تم تجاهلها إلى أن تتم إزالتها من التتبّع أو من قواعد الاستبعاد المخصّصة.

عرض الأنشطة في جدول

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

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

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

• ‫match_case مطابقة الحالة
• ‫regular_expression تعبير عادي.
• match_word مطابقة الكلمة بالكامل.

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

انقر على رابط لفتح ملف مصدر في لوحة المصادر.

ملاحظة: تشير الأقسام الثلاثة التالية إلى العرض الترويجي نفسه. يمكنك تشغيل العرض الترويجي بنفسك على الرابط العرض الترويجي لعلامات التبويب "النشاط" والاطّلاع على المصدر على الرابط GoogleChrome/devtools-samples/perf/activitytabs.html.

الأنشطة الأساسية

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

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

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

اطّلِع على علامة التبويب "شجرة المكالمات" للحصول على مثال على الأنشطة الجذر.

علامة التبويب "شجرة المكالمات"

استخدِم علامة التبويب عرض تسلسل استدعاء الدوال البرمجية للاطّلاع على الأنشطة الأساسية التي تتطلّب أكبر قدر من العمل.

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

في هذا المثال، يشير المستوى الأعلى من العناصر في عمود النشاط، مثل Event وPaint و Composite Layers، إلى الأنشطة الجذر. يمثّل التداخل تسلسل استدعاء الدوال البرمجية. في هذا المثال، أدّى Event إلى Function Call، ما أدّى إلى button.addEventListener، ما أدّى إلى b، وهكذا.

يمثّل الوقت المستغرَق في النشاط الوقت الذي تمّ قضاؤه مباشرةً في هذا النشاط. يمثّل إجمالي الوقت الوقت الذي تمّ قضاؤه في هذا النشاط أو أيّ من الأنشطة الفرعية له.

انقر على الوقت المستغرَق في النشاط أو الوقت الإجمالي أو النشاط لترتيب الجدول حسب هذا العمود.

استخدِم مربّع الفلتر لفلترة الأحداث حسب اسم النشاط.

يتم ضبط قائمة التجميع تلقائيًا على بدون تجميع. استخدِم قائمة التجميع لترتيب جدول الأنشطة استنادًا إلى معايير مختلفة.

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

علامة التبويب "تصاعدي"

استخدِم علامة التبويب من الأسفل إلى الأعلى للاطّلاع على الأنشطة التي استغرقت معظم الوقت بشكل مباشر بشكل مجمّع.

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

في الرسم البياني للمسار الرئيسي في هذا المثال، يمكنك ملاحظة أنّه تمّت قضاء كلّ الوقت تقريبًا في تنفيذ الطلبَين الثالثَين إلى wait(). وبناءً على ذلك، فإنّ أهم نشاط في علامة التبويب من الأسفل إلى الأعلى هو wait. في الرسم البياني للشعلة، يشير اللون الأصفر أسفل المكالمات إلى wait إلى آلاف المكالمات إلى Minor GC. وبناءً على ذلك، يمكنك الاطّلاع على أنّ النشاط التالي الأكثر تكلفةً هو Minor GC في علامة التبويب من الأسفل إلى الأعلى.

يمثّل عمود الوقت المستغرَق في النشاط الوقت المجمّع الذي تمّ قضاؤه مباشرةً في هذا النشاط، على مستوى كل مواقع حدوثه.

يمثّل عمود إجمالي الوقت الوقت المجمّع الذي تمّ قضاؤه في هذا النشاط أو أيّ من الأنشطة الفرعية له.

علامة التبويب "سجلّ الأحداث"

استخدِم علامة التبويب سجلّ الأحداث لعرض الأنشطة بالترتيب الذي حدثت به أثناء التسجيل.

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

يمثّل عمود وقت البدء النقطة التي بدأ فيها هذا النشاط، بالنسبة إلى بداية التسجيل. وقت البدء 1573.0 ms للعنصر المحدّد في هذا المثال يعني أنّ النشاط بدأ بعد 1573 ملي ثانية من بدء التسجيل.

يمثّل عمود الوقت المستغرَق في النشاط الوقت الذي تمّ قضاؤه في هذا النشاط مباشرةً.

تمثّل أعمدة إجمالي الوقت الوقت المستغرَق مباشرةً في هذا النشاط أو في أيّ من النشاطات الفرعية.

انقر على وقت البدء أو الوقت المستغرَق أو الوقت الإجمالي لترتيب الجدول حسب هذا العمود.

استخدِم مربّع الفلترة لفلترة الأنشطة حسب الاسم.

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

أوقِف مربّعات الاختيار التحميل أو النصوص البرمجية أو العرض أو الرسم لفلترة كل الأنشطة من هذه الفئات.

عرض التوقيتات

في مسار المواعيد، يمكنك الاطّلاع على العلامات المهمة، مثل:

• First Paint (FP)
• سرعة عرض المحتوى على الصفحة (FCP)
• سرعة عرض أكبر محتوى مرئي (LCP)
• حدث DOMContentLoaded (DCL)
• حدث التحميل (L)
• مكالمات performance.mark() المخصّصة تظهر أدناه علامة فردية تتضمّن نصائح بعد 813.44 ملي ثانية، وهي مصنّفة على أنّها بدء تشغيل JavaScript.
• مكالمات performance.measure() المخصّصة يظهر مقطع أصفر أدناه، يحمل التصنيف تفاعل بطيء.

اختَر علامة لعرض المزيد من التفاصيل في علامة التبويب الملخّص، بما في ذلك الطابع الزمني والوقت الإجمالي والوقت الذاتي وكائن detail. بالنسبة إلى طلبات performance.mark() وperformance.measure()، تعرض علامة التبويب أيضًا عمليات تتبُّع تسلسل استدعاء الدوال البرمجية.

عرض التفاعلات

اطّلِع على تفاعلات المستخدمين في مسار التفاعلات لتتبُّع المشاكل المحتمَلة في وقت الاستجابة.

للاطّلاع على التفاعلات:

1. افتح أدوات مطوّري البرامج، على سبيل المثال، في هذه الصفحة التجريبية.
2. افتح لوحة الأداء وابدأ تسجيلًا.
3. انقر على عنصر (فنجان قهوة) وأوقِف التسجيل.
4. ابحث عن مسار التفاعلات في المخطط الزمني.

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

يعرض المسار التفاعلات أيضًا تحذيرات مدى استجابة الصفحة لتفاعلات المستخدم (INP) للتفاعلات التي تزيد مدتها عن 200 ملي ثانية في علامة التبويب الملخّص وفي تلميح عند التمرير فوقه:

يحدِّد مسار التفاعلات التفاعلات التي تزيد مدتها عن 200 ملي ثانية بمثلث أحمر في أعلى يسار الصفحة.

عرض تغييرات التصميم

يمكنك الاطّلاع على متغيرات التصميم في مسار متغيرات التصميم. تظهر النوبات على شكل ماسات أرجوانية ويتم تجميعها في clusters (خطوط أرجوانية) استنادًا إلى قربها من بعضها على المخطط الزمني.

لتمييز عنصر تسبّب في حدوث تغيير في التصميم في إطار العرض، مرِّر مؤشر الماوس فوق الماسة المقابلة.

للاطّلاع على مزيد من المعلومات عن أيّ تغييرات في التنسيق في علامة التبويب الملخّص مع الاطّلاع على التوقيتات والنتائج والعناصر والعوامل المحتمَلة، انقر على الماسة أو المجموعة المعنيّة.

لمزيد من المعلومات، يُرجى الاطّلاع على متغيّرات التصميم التراكمية (CLS).

عرض نشاط وحدة معالجة الرسومات

اطّلِع على نشاط وحدة معالجة الرسومات في قسم وحدة معالجة الرسومات.

عرض نشاط الرموز النقطية

اطّلِع على نشاط الرستر في قسم مجموعة الخيوط.

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

توفّر أدوات المطوّرين طرقًا متعددة لتحليل عدد اللقطات في الثانية:

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

قسم "اللقطات"

يوضّح لك قسم اللقطات المدة التي استغرقتها لقطة معيّنة بالضبط.

مرِّر مؤشر الماوس فوق إطار لعرض تلميح يقدّم المزيد من المعلومات عنه.

يعرض هذا المثال تلميحًا عند تمرير مؤشر الماوس فوق إطار.

يمكن أن يعرض قسم الإطارات أربعة أنواع من الإطارات:

1. الإطار غير المستخدَم حاليًا (أبيض) لا توجد تغييرات.
2. الإطار (أخضر): يتم عرض المحتوى على النحو المتوقّع وفي الوقت المحدّد.
3. الإطار المعروض جزئيًا (أصفر مع نمط خطوط متقطعة واسعة قليلة) بذل Chrome قصارى جهده لعرض بعض التعديلات المرئية على الأقل في الوقت المناسب. على سبيل المثال، في حال تأخّر عمل سلسلة المهام الرئيسية لعملية عرض الرسومات (الصورة المتحركة للوحة) ولكن سلسلة مهام أداة الدمج (الانتقال) في الوقت المناسب.
4. الإطار الذي تم إسقاطه (أحمر مع نمط كثيف للخطوط الثابتة) لا يمكن لمتصفّح Chrome عرض اللقطة في وقت معقول.

يعرض هذا المثال تلميحًا عند تمرير مؤشر الماوس فوق إطار معروض جزئيًا.

انقر على إطار لعرض المزيد من المعلومات عنه في علامة التبويب ملخّص. تُحدِّد "أدوات المطوّر" الإطار المحدّد باللون الأزرق.

عرض طلبات الشبكة

وسِّع قسم الشبكة لعرض عرض بدون انقطاع لطلبات الشبكة التي حدثت أثناء تسجيل الأداء.

بجانب اسم مسار الشبكة، يتوفّر مخطّط بياني يعرض أنواع الطلبات بألوان مختلفة.

يتم وضع علامة مثلث أحمر على طلبات حظر العرض في أعلى يسار الصفحة.

مرِّر مؤشر الماوس فوق طلب للاطّلاع على تلميح يتضمن ما يلي:

• عنوان URL للطلب وإجمالي الوقت الذي استغرقه تنفيذه
• الأولوية أو تغيير الأولوية، على سبيل المثال، Medium -> High
• ما إذا كان الطلب Render blocking أم لا
• تفاصيل أوقات الطلبات، موضّحة لاحقًا

عند النقر على طلب، يرسم مقطع الشبكة سهمًا من المشغّل إلى الطلب.

بالإضافة إلى ذلك، تعرض لك لوحة الأداء علامة التبويب الملخّص التي تتضمّن مزيدًا من المعلومات عن الطلب، بما في ذلك على سبيل المثال لا الحصر حقلَي الأولوية الأولية والأولوية (النهائية). إذا اختلفت قيمهما، يعني ذلك أنّه تم تغيير أولوية الجلب للطلب أثناء التسجيل. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تحسين تحميل الموارد باستخدام واجهة برمجة التطبيقات Fetch Priority API.

تعرض علامة التبويب الملخّص أيضًا تفاصيل عن أوقات الطلب.

يتم تمثيل طلب www.google.com بخط على اليسار (|–) وشريط في المنتصف يتضمّن جزءًا داكنًا وجزءًا فاتحًا وخطًا على اليمين (–|).

يمكنك العثور على تفاصيل أخرى عن التوقيتات في علامة التبويب الشبكة. انقر بزرّ الماوس الأيمن على الطلب في مسار الشبكة أو على عنوان URL الخاص به في علامة التبويب الملخّص، ثمّ انقر على إظهار الطلب في لوحة "الشبكة". تنقلك أداة DevTools إلى لوحة الشبكة وتختَر الطلب المقابل. افتح علامة التبويب التوقيت.

في ما يلي كيفية ربط هاتين التقسيمات ببعضهما:

• السطر الأيمن (|–) هو كل الأحداث حتى مجموعة الأحداث Connection start، شاملةً. بعبارة أخرى، يشمل ذلك كل المحتوى قبل Request Sent.
• الجزء المضيء من الشريط هو Request sent وWaiting for server response.
• الجزء الداكن من الشريط هو Content download.
• يشير السطر الأيمن (–|) إلى الوقت المستغرَق في انتظار سلسلة التعليمات الرئيسية. لا تظهر هذه القيمة في علامة التبويب الشبكة > التوقيت.

عرض مقاييس الذاكرة

فعِّل مربّع الاختيار الذاكرة لعرض مقاييس الذاكرة من آخر تسجيل.

تعرِض "أدوات المطوّر" رسمًا بيانيًا جديدًا للذاكرة أعلى علامة التبويب ملخّص. يتوفّر أيضًا مخطّط جديد أسفل مخطّط NET، يُسمى HEAP. يقدّم الرسم البياني HEAP المعلومات نفسها التي يوفّرها سطر JS Heap في الرسم البياني الذاكرة.

يعرض هذا المثال مقاييس الذاكرة أعلى علامة التبويب الملخّص.

تتطابق الخطوط الملونة في الرسم البياني مع مربّعات الاختيار الملونة فوق الرسم البياني. أوقِف مربّع اختيار لإخفاء هذه الفئة من الرسم البياني.

لا يعرض الرسم البياني سوى منطقة التسجيل المحدّدة. في المثال السابق، لا يعرِض الرسم البياني الذاكرة سوى استخدام الذاكرة في بداية التسجيل، حتى علامة 1000 ملي ثانية تقريبًا.

عرض مدة جزء من التسجيل

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

في هذا المثال، يشير الطابع الزمني 488.53ms في أسفل الجزء المحدّد إلى المدة التي استغرقها هذا الجزء.

عرض لقطة شاشة

اطّلِع على مقالة التقاط لقطات شاشة أثناء التسجيل للتعرّف على كيفية تفعيل ميزة لقطات الشاشة.

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

يمكنك أيضًا عرض لقطات الشاشة من خلال النقر على إطار في قسم الإطارات. تعرِض أدوات المطوّر نسخة صغيرة من لقطة الشاشة في علامة التبويب الملخّص.

يعرض هذا المثال لقطة شاشة لإطار 195.5ms في علامة التبويب الملخّص عند النقر عليه في قسم الإطارات.

انقر على الصورة المصغّرة في علامة التبويب الملخّص لتكبير لقطة الشاشة.

يعرض هذا المثال لقطة شاشة تم تكبيرها بعد النقر على الصورة المصغّرة لها في علامة التبويب الملخّص.

عرض معلومات الطبقات

لعرض معلومات الطبقات المتقدّمة حول إطار معيّن:

1. فعِّل قياس سرعة العرض المتقدّم.
2. اختَر إطارًا في قسم الإطارات. تعرِض "أدوات المطوّر" معلومات عن طبقاتها في علامة التبويب الطبقات الجديدة، بجانب علامة التبويب سجلّ الأحداث.

مرِّر مؤشر الماوس فوق طبقة لتمييزها في المخطّط البياني.

يعرض هذا المثال الطبقة رقم 39 مميّزة عند تمرير مؤشر الماوس فوقها.

لنقل المخطّط البياني:

• انقر على وضع التمرير للتنقّل على طول محورَي X وY.
• انقر على وضع التدوير للتدوير بطول محور Z.
• انقر على إعادة التحويل لإعادة الرسم البياني إلى موضعه الأصلي.

إليك أمثلة على تحليل الطبقات:

عرض أداة تحليل عرض محتوى الصفحة

لعرض معلومات متقدّمة عن حدث الطلاء:

1. فعِّل قياس سرعة العرض المتقدّم.
2. اختَر حدث Paint في المقطع الصوتي Main.

تحليل أداء العرض باستخدام علامة التبويب "العرض"

استخدِم ميزات علامة التبويب العرض للمساعدة في عرض أداء عرض صفحتك.

افتح علامة التبويب العرض.

عرض عدد اللقطات في الثانية في الوقت الفعلي باستخدام مقياس عدد اللقطات في الثانية

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

اطّلِع على إحصاءات العرض للإطارات.

عرض أحداث الرسم في الوقت الفعلي باستخدام ميزة "وميض الطلاء"

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

راجِع مقالة تمييز أجزاء صفحة الويب المطلوب عرضها.

عرض عنصر مركّب من الطبقات باستخدام "حدود الطبقات"

استخدِم حدود الطبقات لعرض تراكب لحدود الطبقات والمربّعات في أعلى الصفحة.

اطّلِع على حدود الطبقات.

العثور على مشاكل في أداء الانتقال في الصفحة في الوقت الفعلي

استخدِم مشاكل متعلقة بأداء الانتقال في الصفحة لتحديد عناصر الصفحة التي تحتوي على مستمعي أحداث مرتبطين بالانتقال في الصفحة وقد يضرّون بأداء الصفحة. تُبرز أدوات المطوّرين العناصر التي يُحتمل أن تتضمّن مشاكل باللون الأخضر الزمردي.

راجِع مشاكل متعلقة بأداء الانتقال في الصفحة.