في Chrome 102، ستلاحظ لوحة تجريبية جديدة، وهي إحصاءات الأداء، في "أدوات مطوري البرامج". في هذه المشاركة، سنناقش ليس فقط سبب عملنا على إنشاء لجنة جديدة، ولكن أيضًا التحديات الفنية التي واجهناها والقرارات التي اتخذناها على طول الطريق.
ما هو الهدف من إنشاء لوحة أخرى؟
(لقد نشرنا فيديو عن الأسباب التي دفعتك إلى إنشاء لوحة "إحصاءات الأداء" وكيفية الحصول على إحصاءات قابلة للاستخدام حول أداء موقعك الإلكتروني من خلال لوحة "إحصاءات الأداء"، إذا لم يسبق لك الاطّلاع عليها).
تُعدّ لوحة الأداء الحالية مصدرًا رائعًا إذا كنت تريد الاطّلاع على جميع بيانات موقعك الإلكتروني في مكان واحد، ولكنّنا نعتقد أنّ ذلك قد يكون مربكًا بعض الشيء. إذا لم تكن خبيرًا في الأداء، فمن الصعب أن تعرف بالضبط ما الذي تبحث عنه والأجزاء ذات الصلة من التسجيل.
انتقِل إلى لوحة الإحصاءات حيث يمكنك الاطّلاع على مخطط زمني للتتبُّع وفحص البيانات، بالإضافة إلى الحصول على قائمة مفيدة تضم ما تعتبره "أدوات مطوّري البرامج" "الإحصاءات" الرئيسية التي تستحق التعمق فيها. ستحدِّد الإحصاءات المشاكل مثل طلبات حظر العرض ومتغيّرات التصميم والمهام الطويلة على سبيل المثال لا الحصر، والتي يمكن أن تؤثّر سلبًا في أداء تحميل الصفحة على موقعك الإلكتروني، لا سيّما نتائج مؤشرات أداء الويب الأساسية (CWV) على موقعك الإلكتروني. إلى جانب عملية الإبلاغ عن المشاكل، ستوفّر لك "إحصاءات الأداء" اقتراحات قابلة للتنفيذ لتحسين نتائج "سوق Chrome الإلكتروني"، كما ستوفّر لك روابط تؤدي إلى مراجع ووثائق إضافية.
هذه اللوحة تجريبية ونريد تلقّي ملاحظاتك. يُرجى إخبارنا إذا واجهت أي أخطاء، أو إذا كانت لديك طلبات ميزات تعتقد أنّها ستساعدك عند العمل على تحسين أداء موقعك الإلكتروني.
كيفية إنشاء "إحصاءات الأداء"
مثل بقية أدوات مطوّري البرامج، أنشأنا "إحصاءات الأداء" في TypeScript، واستخدمنا مكوّنات الويب، المستندة إلى lit-html، لإنشاء واجهة المستخدم. تختلف "إحصاءات الأداء" في أنّ واجهة المستخدم الأساسية هي عنصر HTML canvas، ويتم رسم المخطط الزمني على هذه اللوحة. يأتي الكثير من التعقيد من إدارة لوحة الرسم هذه: ليس فقط رسم التفاصيل الصحيحة في المكان المناسب، ولكن إدارة أحداث الماوس (على سبيل المثال: أين نقر المستخدم على اللوحة؟ هل نقروا على حدث رسمناه؟) وتأكدوا من إعادة عرض اللوحة بشكل فعال.
عدة مقاطع صوتية على لوحة واحدة
بالنسبة إلى موقع ويب معين، توجد "مسارات" متعددة نريد عرضها، ويمثل كل منها فئة مختلفة من البيانات. على سبيل المثال، ستعرض لوحة "الإحصاءات" ثلاثة قنوات تلقائيًا:
وفي إطار سعينا المستمر في توفير الميزات إلى اللوحة، نتوقّع إضافة المزيد من المسارات.
أردنا في البداية أن يعرض كل من هذه المسارات <canvas> الخاصة به، لكي تصبح طريقة العرض الرئيسية عناصر لوحة رسم متعددة مكدسة عموديًا. سيؤدي ذلك إلى تبسيط العرض على مستوى المسار، لأنّه يمكن عرض كل مسار بشكل منفصل ولن يكون هناك خطر بعرض المسار خارج حدوده، ولكن للأسف، يواجه هذا النهج مشكلتَين رئيسيتَين:
تعد عناصر canvas باهظة الثمن في إعادة (إعادة العرض)؛ حيث يكون وجود عدة لوحات أكثر تكلفة من لوحة واحدة، حتى لو كانت لوحة الرسم أكبر.
يصبح عرض أي تراكبات تمر عبر مسارات متعددة (على سبيل المثال، الخطوط الرأسية لوضع علامة على الأحداث مثل وقت FCP) معقدًا: يجب أن يتم عرضها على عدة لوحات ونتأكد من عرضها جميعًا ومحاذاتها بشكل صحيح.
إنّ استخدام علامة canvas واحدة لواجهة المستخدم بأكملها يعني أنّنا بحاجة إلى معرفة كيفية ضمان عرض كل مسار على الإحداثيات الصحيحة وعدم تجاوزه إلى مسار آخر. على سبيل المثال، إذا كان ارتفاع مسار معين 100 بكسل، فلا يمكننا السماح له بعرض شيء يبلغ ارتفاعه 120 بكسل وإدراجه في المسار الذي يقع أسفله. لحل هذه المشكلة، يمكننا استخدام clip. قبل أن نعرض كل مسار، نرسم مستطيلاً يمثل نافذة المسار المرئية. يضمن ذلك أن أي مسارات مرسومة خارج هذه الحدود سيتم اقتصاصها من خلال لوحة الرسم.
canvasContext.beginPath();
canvasContext.rect(
trackVisibleWindow.x, trackVisibleWindow.y, trackVisibleWindow.width, trackVisibleWindow.height);
canvasContext.clip();
أردنا أيضًا عدم معرفة موضع كل مقطع صوتي بشكل عمودي، إذ يجب أن يعبّر كل مقطع عن نفسه كما لو كان يتم عرضه عند (0 و0)، كما نستخدم مكوّنًا من مستوى أعلى (نسمّيه TrackManager) لإدارة الموضع العام للمقطع. ويمكن إجراء ذلك باستخدام translate، التي تترجم لوحة الرسم حسب موضع (x، y). مثال:
canvasContext.translate(0, 10); // Translate by 10px in the y direction
canvasContext.rect(0, 0, 10, 10); // draw a rectangle at (0, 0) that’s 10px high and wide
على الرغم من ضبط رمز rect على 0, 0 كموضع، فإنّ الترجمة المطبَّقة بشكل عام ستؤدي إلى عرض المستطيل عند 0, 10. وهذا يتيح لنا العمل على أساس كل مسار كما لو كنا نعرضه عند (0 و0)، مع إتاحة ترجمة مدير المقاطع الصوتية إلى كل مسار لضمان عرض كل مسار بشكل صحيح أسفل المسار السابق.
لوحات خارج الشاشة للأغاني واللحظات المميّزة
يُعد عرض لوحة الرسم مكلفًا نسبيًا، ونريد التأكد من بقاء لوحة "الإحصاءات" سلسة وسريعة الاستجابة أثناء استخدامها. أحيانًا لا تتمكن من تجنب الاضطرار إلى إعادة عرض اللوحة بالكامل: على سبيل المثال، إذا قمت بتغيير مستوى التكبير/التصغير، فينبغي علينا البدء من جديد وإعادة عرض كل شيء. تكون إعادة عرض لوحة الرسم مكلفة بشكل خاص لأنه لا يمكنك حقًا إعادة عرض جزء صغير منها فقط؛ بل تحتاج إلى محو لوحة الرسم بالكامل وإعادة الرسم. يختلف ذلك عن إعادة عرض DOM، حيث يمكن للأدوات حساب الحد الأدنى من العمل المطلوب وعدم إزالة كل العناصر والبدء من جديد.
كانت إحدى النقاط التي واجهنا فيها مشكلات مرئية هي إبراز. عند تمرير مؤشر الماوس فوق المقاييس في الجزء، نميِّزها في المخطط الزمني، وبالمثل إذا مرّرت مؤشر الماوس فوق أحد الإحصاءات لحدث معيّن، سنرسم حدًا أزرق حول هذا الحدث.
تم تفعيل هذه الميزة أولاً من خلال رصد حركة الماوس فوق عنصر يؤدي إلى تمييز النص، ثم رسم هذا التمييز مباشرةً على لوحة الرسم الرئيسية. تأتي مشكلتنا عندما نضطر إلى إزالة التمييز: الخيار الوحيد هو إعادة رسم كل شيء! من المستحيل إعادة رسم المنطقة التي كان هناك التمييز فيها (ليس بدون تغييرات معمارية ضخمة)، ولكن إعادة رسم اللوحة بأكملها لمجرد أننا نريد إزالة الحد الأزرق حول عنصر واحد وكأنها مبالغة في الشكل. وهو يتباطأ أيضًا بصريًا إذا حركت الماوس بسرعة على عناصر مختلفة لتشغيل عناصر بارزة متعددة في تتابع سريع.
لحل هذه المشكلة، قسّمنا واجهة المستخدم إلى لوحتين خارج الشاشة: لوحة "الرئيسية" حيث يتم عرض المسارات، ولوحة "أهم التفاصيل" حيث يتم رسم النقاط البارزة. نعرض بعد ذلك من خلال نسخ هذه اللوحات إلى اللوحة الفردية التي تظهر على الشاشة للمستخدم. يمكننا استخدام الطريقة drawImage على سياق لوحة الرسم، والذي قد يتم أخذه إلى لوحة أخرى كمصدر.
يعني ذلك أن إزالة التمييز لن تؤدي إلى إعادة رسم اللوحة الرئيسية، بل يمكننا بدلاً من ذلك محو اللوحة التي تظهر على الشاشة، ثم نسخ اللوحة الرئيسية إلى اللوحة المرئية. عملية نسخ اللوحة تكون منخفضة التكلفة، ولكنها مكلفة، لذلك من خلال نقل اللقطات البارزة إلى لوحة منفصلة، نتجنب هذه التكلفة عند تشغيل النصوص المميّزة وإيقافها.
تحليل آثار شامل تم اختباره
تتمثل إحدى فوائد إنشاء ميزة جديدة من البداية في أنه يمكنك التفكير في الخيارات الفنية التي تم إجراؤها سابقًا وإجراء التحسينات. كان أحد الأشياء التي أردنا تحسينها هو تقسيم التعليمة البرمجية بشكل صريح إلى قسمين، منفصلين تمامًا تقريبًا:
تحليل ملف التتبُّع وسحب البيانات المطلوبة. عرض مجموعة من المسارات
أتاح لنا إبقاء عملية التحليل (الجزء 1) منفصلة عن عمل واجهة المستخدم (الجزء 2) إنشاء نظام تحليل قوي، ويتم تنفيذ كل عملية تتبُّع من خلال سلسلة من المعالجات المسؤولة عن مشاكل مختلفة: تحسب LayoutShiftHandler جميع المعلومات التي نحتاجها لمتغيّرات التصميم، بينما يعالج NetworkRequestsHandler بشكل حصري طلبات الشبكة. كان من المفيد أيضًا الحصول على خطوة التحليل الواضحة هذه حيث يكون لدينا معالِجات مختلفة مسؤولة عن الأجزاء المختلفة من عملية التتبُّع، إذ يمكن أن يصبح تحليل التتبُّع معقدًا للغاية، ويساعد في التركيز على مشكلة واحدة في كل مرة.
واستطعنا أيضًا اختبار تحليل آثار البيانات بشكل شامل من خلال تسجيل التسجيلات في "أدوات مطوري البرامج" وحفظها ثم تحميلها كجزء من حزمة الاختبار. وهذا أمر رائع، لأنّه يمكننا إجراء الاختبارات باستخدام الآثار الحقيقية وعدم إنشاء كميات ضخمة من بيانات التتبّع المزيفة التي قد تصبح قديمة.
اختبار لقطات الشاشة لواجهة مستخدم لوحة الرسم
واعتمادًا على موضوع الاختبار، عادةً ما نختبر مكوّنات الواجهة الأمامية من خلال عرضها في المتصفّح والتأكّد من أنّها تعمل على النحو المتوقّع. ويمكننا إرسال أحداث النقر لتشغيل التحديثات، ونؤكّد صحة نموذج العناصر في المستند (DOM) الذي تنشئه هذه المكونات. يعمل هذا النهج بشكل جيد بالنسبة لنا ولكنه يسقط عند التفكير في العرض على لوحة ؛ لا توجد طريقة لفحص اللوحة وتحديد ما يتم رسمه! ولذلك فإن أسلوبنا المعتاد في العرض ثم الاستعلام ليس مناسبًا.
ولتمكيننا من إجراء بعض التغطية للاختبار، لجأنا إلى اختبار لقطات الشاشة. يؤدي كل اختبار إلى تنشيط لوحة ما ويعرض المسار الذي نريد اختباره، ثم يأخذ لقطة شاشة لعنصر لوحة الرسم. بعد ذلك، يتم تخزين لقطة الشاشة هذه في قاعدة الرموز لدينا، وستقارن عمليات الاختبار المستقبلية لقطة الشاشة المُخزَّنة بلقطة الشاشة التي يتم إنشاؤها. وإذا كانت لقطات الشاشة مختلفة، لن ينجح الاختبار. نوفّر أيضًا علامة لإجراء الاختبار وفرض تعديل لقطة الشاشة عندما نغيّر العرض عن قصد ونحتاج إلى تحديث الاختبار.
لا تعتبر اختبارات لقطات الشاشة مثالية وتكون غير واضحة بعض الشيء، حيث يمكنك فقط اختبار ما إذا كان العنصر بالكامل يتم عرضه كما هو متوقع، بدلاً من التأكيدات الأكثر تحديدًا، وفي البداية كنا مذنبين بالإفراط في استخدامها لضمان عرض كل مكون (HTML أو لوحة رسم) بشكل صحيح. وأدّى ذلك إلى إبطاء مجموعة اختبارنا بشكل كبير، وأدّى إلى حدوث مشاكل أدّت إلى تعذُّر إنشاء لقطات شاشة متعددة وحاجتها إلى إجراء تعديلات على واجهة المستخدم الصغيرة وغير الملائمة تقريبًا (مثل التغييرات الطفيفة في الألوان أو إضافة هامش معيّن بين العناصر). قلّلنا الآن من استخدامنا للقطات الشاشة، واستخدِمها فقط مع المكوّنات المستندة إلى لوحة الرسم، وقد نجح هذا التوازن بالنسبة إلينا حتى الآن.
الخلاصة
شكّل إنشاء لوحة "إحصاءات الأداء" الجديدة تجربة تعليمية ممتعة وغنية بصريًا للفريق. لقد تعرفنا على الكثير حول ملفات التتبع، والعمل باستخدام لوحة الرسم وغير ذلك الكثير. نأمل أن تستمتع باستخدام اللوحة الجديدة، ونتطلّع إلى معرفة ملاحظاتك وآرائك.
لمزيد من المعلومات عن لوحة "إحصاءات الأداء"، اطّلِع على المقالة إحصاءات الأداء: الحصول على إحصاءات قابلة للاستخدام عن أداء موقعك الإلكتروني.
تنزيل قنوات المعاينة
يمكنك استخدام إصدار Canary أو إصدار مطوّري البرامج أو الإصدار التجريبي من Chrome كمتصفّح تلقائي للتطوير. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات "أدوات مطوري البرامج" واختبار واجهات برمجة التطبيقات المتطورة للأنظمة الأساسية على الويب والعثور على المشاكل في موقعك الإلكتروني قبل المستخدمين.
التواصل مع فريق "أدوات مطوري البرامج في Chrome"
يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".
- يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية
> مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج". - يمكنك نشر تغريدة على @ChromeDevTool.
- يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.