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

Kayce Basques

Sofia Emelianova

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

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

تسجيل الأداء

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

تسجيل أداء بيئة التشغيل

تسجيل أداء بيئة التشغيل عندما تريد تحليل أداء إحدى الصفحات أثناء تشغيلها، بدلاً من التحميل.

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

إيقاف نماذج JavaScript

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

1. افتح قائمة إعدادات الالتقاط . راجع عرض إعدادات التسجيل.
2. ضَع علامة في مربّع الاختيار إيقاف نماذج JavaScript.
3. تسجيل الصفحة

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

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

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

التحكُّم في الشبكة أثناء التسجيل

للتحكّم في الشبكة أثناء التسجيل:

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

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

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

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

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

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

لعرض إحصاءات أدوات اختيار قواعد CSS أثناء أحداث إعادة احتساب النمط التي يتم تنفيذها لفترة طويلة:

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

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

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

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

1. افتح قائمة إعدادات الالتقاط . راجع عرض إعدادات التسجيل.
2. ضع علامة في مربّع الاختيار تفعيل أدوات قياس السرعة.

للتعرّف على كيفية التفاعل مع معلومات عن محتوى الصفحة، يُرجى الاطّلاع على عرض الطبقات وعرض عرض محتوى الصفحة. محلل البيانات.

محاكاة تزامن الأجهزة

لاختبار أداء التطبيق باستخدام عدد مختلف من نوى المعالج، يمكنك ضبط القيمة التي تم الإبلاغ عنها من خلال السمة navigator.hardwareConcurrency. تستخدم بعض التطبيقات هذه السمة للتحكم في درجة التوازي في التطبيق، على سبيل المثال، للتحكم في حجم مجموعة Emscripten pthreading.

لمحاكاة تزامن الأجهزة:

1. افتح قائمة إعدادات الالتقاط . راجع عرض إعدادات التسجيل.
2. ضع علامة في المربّع تزامن الجهاز، واضبُط عدد النوى في مربّع الإدخال.

تعرض "أدوات مطوري البرامج" رمز تحذير بجانب علامة التبويب الأداء لتذكيرك بتفعيل ميزة محاكاة مزامنة الأجهزة.

للعودة إلى القيمة التلقائية التي تبلغ 10، انقر على زر عودة .

حفظ تسجيل

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

تحميل تسجيل

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

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

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

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

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

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

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

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

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

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

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

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_less التالي.
• اضغط على Shift+Enter لاختيار السابق أو Enter لاختيار التالي.

تعرض لوحة الأداء تلميحًا حول النشاط المحدّد في مربّع البحث.

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

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

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

تغيير ترتيب المقاطع الصوتية وإخفائها

لتنظيم مسارات تتبُّع الأداء، يمكنك تغيير ترتيب المسارات وإخفاء المسارات غير الملائمة في وضع ضبط المسار.

لنقل المسارات وإخفائها:

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

شاهِد الفيديو للاطّلاع على سير العمل هذا.

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

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

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

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

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

قراءة "مخطط اللهب"

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

يعرض هذا المثال رسمًا بيانيًا للشعب في المسار الرئيسي. تسبّب حدث click في استدعاء دالة مع إخفاء الهوية. وهذه الدالة، بدورها، تُسمى onEndpointClick_، والتي تُسمى handleClick_، وهكذا.

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

يتم أيضًا تمييز المهام الطويلة باستخدام مثلث أحمر اللون، والجزء المظلّل باللون الأحمر يتجاوز طول الجزء 50 مللي ثانية:

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

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

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

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

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

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

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

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

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

في مسار التوقيتات، اعرض محددات إعلانات مهمة مثل:

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

اختَر علامة للاطّلاع على مزيد من التفاصيل في علامة التبويب الملخّص، بما في ذلك طابعها الزمني وإجمالي الوقت والوقت الذاتي والكائن detail.

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

يمكنك عرض تفاعلات المستخدمين على مسار التفاعلات لتتبُّع المشاكل المحتملة في الاستجابة للاستجابة.

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

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

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

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

يشير مسار التفاعلات إلى التفاعلات التي تتجاوز 200 مللي ثانية مع مثلث أحمر في أعلى يسار الصفحة.

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

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

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

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

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

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

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

قسم الإطارات

يخبرك قسم الإطارات بالمدة التي استغرقها إطار معين بالضبط.

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

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

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

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

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

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

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

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

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

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

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

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

عند النقر على أحد الطلبات، يرسم مسار الشبكة سهمًا من بادئه إلى الطلب.

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

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

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

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

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

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

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

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

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

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

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

لا يعرض الرسم البياني إلا منطقة التسجيل التي تم اختيارها. في المثال السابق، يعرض الرسم البياني الذاكرة استخدام الذاكرة فقط في بداية التسجيل، بما يصل إلى علامة 1,000 ملي ثانية تقريبًا.

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

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

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

عرض لقطة شاشة

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

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

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

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

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

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

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

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

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

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

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

لنقل المخطط:

• انقر على وضع العرض الشامل . للتحرك على طول المحورين س وص.
• انقر على وضع التدوير. للتدوير على طول المحور Z.
• انقر على إعادة ضبط التحويل لإعادة تعيين المخطط إلى موضعه الأصلي.

الاطّلاع على تحليل الطبقات عمليًا:

عرض محلّل عرض محتوى الصفحة

لعرض معلومات متقدّمة عن حدث عرض محتوى الصفحة:

1. تفعيل قياس سرعة عرض محتوى الصفحة
2. اختَر حدث رسم في المسار الرئيسي.

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

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

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

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

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

يمكنك الاطّلاع على إحصاءات عرض الإطار.

اعرض فعاليات الرسم في الوقت الفعلي باستخدام Paint Flashing

استخدِم ميزة Paint Flashing لعرض كل أحداث نسخ الرسم على الصفحة في الوقت الفعلي.

راجِع رسم وامض.

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

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

راجع حدود الطبقات.

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

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

راجِع مشاكل أداء الانتقال للأعلى أو للأسفل.