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

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 إلى جعل وحدة المعالجة المركزية تعمل أبطأ بمقدار مرتين من قدرتها المعتادة. لا يمكن لـ DevTools محاكاة وحدات المعالجة المركزية للأجهزة المحمولة، لأن بنية الأجهزة المحمولة مختلفة تمامًا عن بنية أجهزة الكمبيوتر المكتبية والمحمولة.

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

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

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 في علامة التبويب الملخّص.

إخفاء الدوال وعناصرها في الرسم البياني اللامع

لترتيب رسم بياني خطي بالعناصر في سلسلة المحادثات الرئيسية، يمكنك إخفاء الوظائف المحددة أو عناصرها الثانوية:

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

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

   

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

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

   

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

تجاهُل النصوص البرمجية في الرسم البياني للأخطاء الحركية

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

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

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

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

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

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

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

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

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

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

تتبع الأشخاص الذين بدأوا الأحداث

يمكن أن يعرض المسار الرئيسي الأسهم التي تربط بين المبتدئين والأحداث التي سبّبوها:

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

لرؤية الأسهم، اعثر على الحدث البادئ أو الحدث الذي تسبب فيه في مخطط اللهب واختره.

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

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

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

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

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

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

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

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

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

الأنشطة الجذر

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

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

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

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

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

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

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

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

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

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

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

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

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

علامة التبويب "أسفل لأعلى"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قسم الإطارات

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

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

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

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

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

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

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

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

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

وتكون الطلبات مصنَّفة حسب اللون على النحو التالي:

• HTML: أزرق
• CSS: أرجواني
• JS: أصفر
• الصور: أخضر

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

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

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

في المثال السابق، يتم تمثيل طلب www.google.com بخط على اليسار وشريط في المنتصف مع جزء داكن وجزء فاتح وخط على اليمين. تعرض لقطة الشاشة التالية التمثيل المناسب للطلب نفسه في علامة التبويب التوقيت في لوحة الشبكة. إليك كيفية ارتباط هذين التمثيلين ببعضهما:

• يتضمن السطر الأيسر كل العناصر وصولاً إلى مجموعة الأحداث "Connection Start"، بشكل شامل. بعبارة أخرى، كل شيء قبل Request Sent، حصريًا.
• الجزء الخفيف من الشريط هو Request Sent وWaiting (TTFB).
• الجزء الداكن من الشريط هو Content Download.
• أما السطر الأيمن، فيشير بشكل أساسي إلى الوقت المستغرَق في انتظار سلسلة التعليمات الرئيسية. لا يتم تمثيل ذلك في علامة التبويب التوقيت.

يوضّح هذا المثال تمثيل الشريط على مستوى طلب www.google.com.

يوضّح هذا المثال تمثيل علامة التبويب التوقيت لطلب www.google.com.

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

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

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

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

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

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

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

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

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

عرض لقطة شاشة

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

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

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

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

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

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

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

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

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

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

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

لنقل المخطط:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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