لطالما كانت لوحة المخطط الزمني في "أدوات المطوّر" هي أفضل محطة أولى على مسار تحسين الأداء. تساعدك هذه النظرة العامة المركزية على نشاط تطبيقك في تحليل الوقت الذي يتمّ خلاله تحميل التطبيق وتنفيذ النصوص البرمجية وعرض المحتوى وتلوينه. لقد أجرينا مؤخرًا ترقية على "المخطط الزمني" من خلال إضافة المزيد من الأدوات حتى تتمكّن من الاطّلاع على عرض أكثر تفصيلاً لأداء تطبيقك.
لقد أضفنا الميزات التالية:
- أداة تحليل JavaScript مدمجة (يشمل ذلك رسمًا بيانيًا مفصّلاً لأداء الرموز)
- عارض اللقطات لمساعدتك في الاطّلاع على الطبقات المركبة
- أداة تحليل عمليات الرسم للتوغّل بشكل مفصّل في نشاط الرسم في المتصفّح
يُرجى العِلم أنّ استخدام خيارات الالتقاط في الطلاء الموضّحة في هذه المقالة يتسبب في بعض التأثيرات الجانبية على الأداء، لذا لا تفعّلها إلا عند الحاجة إليها.
أداة تحليل JavaScript المدمجة
إذا سبق لك تصفُّح لوحة الملفات التعريفية، من المرجّح أن تكون على دراية بأداة تحليل وحدة المعالجة المركزية في JavaScript. تقيس هذه الأداة الوقت المستغرَق في تنفيذ وظائف JavaScript. من خلال عرض ملفات تحليل JavaScript باستخدام مخطّط Flame Chart، يمكنك الاطّلاع على معالجة JavaScript بصريًا بمرور الوقت.
يمكنك الآن الحصول على هذه التفاصيل الدقيقة لتنفيذ JavaScript في لوحة المخطط الزمني. من خلال اختيار خيار تسجيل JS Profiler، يمكنك الاطّلاع على تسلسلات استدعاء JavaScript في "المخطط الزمني" مع أحداث المتصفّح الأخرى. تساعد إضافة هذه الميزة إلى "المخطط الزمني" في تبسيط سير عمل تصحيح الأخطاء. بالإضافة إلى ذلك، يتيح لك هذا الإجراء عرض JavaScript في سياقه وتحديد أجزاء الرمز التي تؤثر في وقت تحميل الصفحة وعرضها.
بالإضافة إلى أداة تحليل JavaScript، دمجنا أيضًا عرض مخطّط Flame Chart في لوحة المخطط الزمني. يمكنك الآن عرض نشاط تطبيقك إما على شكل مخطّط "العرض المتواصل للأحداث" الكلاسيكي أو على شكل مخطّط "الرسم البياني للأداء". يتيح لك رمز مخطّط اللهب التبديل بين هاتين الطريقتَين.
أداة عرض الإطارات
يُعدّ فن دمج الطبقات جانبًا آخر من المتصفّح كان مخفيًا عن المطوّرين في معظم الأحيان. عند استخدام الطبقات بشكل مقتصد وبعناية، يمكن أن تساعد في تجنُّب عمليات إعادة الطلاء المكلّفة وتحقيق تحسينات كبيرة في الأداء. ولكن من الصعب في أغلب الأحيان توقّع كيفية دمج المتصفّح لمحتوى موقعك الإلكتروني. باستخدام خيار الالتقاط الطلاء الجديد في "المخطط الزمني"، يمكنك عرض الطبقات المركبة في كل لقطة من التسجيل.
عند اختيار شريط إطار رمادي أعلى الخيط الرئيسي، تقدّم لوحة الطبقات نموذجًا مرئيًا للطبقات التي تتألف منها طبقات تطبيقك.
يمكنك تكبير أو تصغير نموذج الطبقات أو تدويره أو سحبه لاستكشاف محتوياته. يؤدي تمرير مؤشر الماوس فوق إحدى الطبقات إلى إظهار موضعها الحالي على الصفحة. يتيح لك النقر بزر الماوس الأيمن على طبقة الانتقال إلى العقدة المقابلة في لوحة العناصر. توضّح لك هذه الميزات ما تم ترقيته إلى طبقة. إذا اخترت طبقة، يمكنك أيضًا الاطّلاع على سبب ترقيتها في الصف الذي يحمل العنوان أسباب الدمج.
محلِّل عرض محتوى الصفحة
أخيرًا وليس آخرًا، أضفنا أداة تحليل عمليات الرسم لمساعدتك في تحديد التقطُّع في الأداء الناتج عن عمليات الرسم المُكلفة. تُثري هذه الميزة "المخطط الزمني" بمزيد من التفاصيل حول العمل الذي يُجريه Chrome أثناء أحداث الرسم.
بالنسبة إلى المبتدئين، أصبح من الأسهل الآن تحديد المحتوى المرئي المرتبط بكل حدث رسم. عند اختيار حدث طلاء أخضر في "المخطط الزمني"، تعرض لك لوحة التفاصيل معاينة للبكسل الفعلية التي تمّ طلاؤها.
إذا أردت التعمّق في هذه التفاصيل، يمكنك التبديل إلى لوحة Paint Profiler. يعرض لك أداة تحليل الأداء هذه أوامر الرسم الدقيقة التي نفّذها المتصفّح للرسم المحدّد. لمساعدتك في ربط هذه الأوامر المدمجة مع المحتوى الفعلي في تطبيقك، يمكنك النقر بزر الماوس الأيمن على طلب draw* والانتقال مباشرةً إلى العقدة المقابلة في لوحة العناصر.
يتيح لك المخطط الزمني المصغّر في أعلى اللوحة إعادة تشغيل عملية الرسم والتعرّف على العمليات التي يصعب على المتصفّح تنفيذها. يتم ترميز عمليات الرسم حسب اللون على النحو التالي: الوردي (الأشكال)، والأزرق (الصور المخصّصة للطباعة)، والأخضر (النص)، والأرجواني (غير ذلك). يشير ارتفاع الشريط إلى مدة المكالمة، لذا يمكن أن يساعدك التحقيق في الأشرطة العالية في معرفة ما الذي كان مكلفًا في أحد الألوان المحدّدة.
الملف الشخصي والأرباح
عندما يتعلق الأمر بتحسين الأداء، يمكن أن تكون معرفة المتصفّح مفيدة للغاية. من خلال إعطائك نظرة سريعة على الأداء الداخلي، تساعدك هذه التعديلات على "مخطّط الأداء" في توضيح العلاقة بين الرمز البرمجي وعمليات عرض Chrome. جرِّب هذه الخيارات الجديدة في "المخطط الزمني" واطّلِع على ما يمكن أن تُقدّمه "أدوات مطوّري البرامج في Chrome" لتحسين سير عملك في البحث عن الأداء غير السلس.