المخطط الزمني لأدوات مطوّري البرامج - يتم الآن عرض القصة الكاملة

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

لقد أضفنا الميزات التالية:

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

محلّل JavaScript مدمج

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

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

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

رمز الشعلة
استخدام خيار التقاط محلّل JavaScript وعرض الرسم البياني الثابت للتحقيق في حزم المكالمات في المخطط الزمني.
استخدام خيار التقاط JS Profiler وعرض الرسم البياني المفصّل للتحقق من حزم المكالمات في المخطط الزمني

عارض الإطارات

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

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

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

فحص طبقة من معرض الصور المستقطبة المبعثرة لـ Codrops للكشف عن أسباب التركيب في المتصفح.
فحص طبقة من معرض Polaroids المبعثرة التابع لـ Codrops للكشف عن أسباب التركيب في المتصفح.

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

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

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

معاينة وحدات البكسل التي رسمها المتصفح باستخدام خيار الالتقاط "طلاء".
معاينة وحدات البكسل التي رسمها المتصفّح باستخدام خيار الالتقاط التلوين

إذا كنت تريد التعرف على مزيد من التفاصيل، فيمكنك التبديل إلى لوحة Paint Profiler. يعرض لك محلل الرسم هذا أوامر الرسم الدقيقة التي نفذها المتصفح للطلاء المحدد. لمساعدتك في ربط هذه الأوامر الأصلية بالمحتوى الفعلي في تطبيقك، يمكنك النقر بزر الماوس الأيمن على استدعاء draw* والانتقال مباشرةً إلى العقدة المقابلة في لوحة العناصر.

يؤدي ربط المتصفِّح الأصلي برسم طلبات إلى عناصر DOM باستخدام أداة Paint Profiler.
ربط استدعاءات رسم المتصفّح الأصلي بعناصر DOM باستخدام Paint Profiler

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

الملف الشخصي والأرباح!

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