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