تضع لوحة الأداء علامة على كل مهمة تستغرق وقتًا طويلاً من خلال مثلث أحمر في أعلى يسار الصفحة وتحذير في علامة التبويب الملخّص للإشارة إلى أنّ العمل على سلسلة التعليمات الرئيسية يستغرق وقتًا طويلاً ويبطئ الأداء:
في تسجيلات الأداء، قد تكون بعض هذه المهام طويلة الأمد أحداث إعادة احتساب النمط. يتتبّع حدث إعادة احتساب النمط الوقت الذي يستغرقه المتصفّح لتنفيذ ما يلي:
- كرر على عناصر DOM على الصفحة للعثور على جميع قواعد نمط CSS التي تطابق عنصرًا معينًا.
- احسب النمط الفعلي لكل عنصر، بناءً على قواعد نمط CSS المطابقة.
يلزم إعادة حساب أنماط CSS كلما تغيرت قابلية تطبيق قواعد CSS، مثل عندما:
- إضافة العناصر إلى نموذج العناصر في المستند (DOM) أو إزالتها منه
- تغيير سمات أحد العناصر، مثل قيمة فئة أو سمة المعرّف.
- يُدخِل المستخدم بيانات، مثل تحريك الماوس أو تغيير تركيز العنصر، ما قد يؤثر في قواعد
:hover.
إذا عثرت على أحداث إعادة احتساب النمط التي تستغرق وقتًا طويلاً، يمكنك استخدام علامة التبويب إحصاءات أدوات الاختيار لمعرفة أدوات اختيار لغة CSS التي تستغرق وقتًا طويلاً وتبطئ الأداء.
تقدّم علامة التبويب إحصاءات أداة الاختيار إحصاءات عن أدوات اختيار قواعد CSS التي كانت مضمّنة في حدث أو أكثر من أحداث إعادة احتساب النمط ضمن تسجيل أداء.
تسجيل تتبُّع أداء عندما تكون ميزة "إحصاءات أدوات الاختيار" مفعَّلة
لعرض إحصاءات أدوات اختيار قواعد CSS أثناء أحداث إعادة احتساب النمط التي تستغرق فترة طويلة، يمكنك تسجيل تتبُّع أداء مع تفعيل إعداد الالتقاط إحصاءات أداة الاختيار.
لتسجيل تتبُّع أداء باستخدام إحصاءات أدوات الاختيار:
افتح صفحة ويب، على سبيل المثال، صفحة العرض التوضيحي لمعرض الصور.
افتح "أدوات مطوري البرامج" وانتقِل إلى لوحة الأداء.
في لوحة الأداء، انقر على زر الإعدادات إعدادات الالتقاط وضَع علامة في مربّع مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.
انقر على radio_button_checked تسجيل، وشغِّل السيناريو الذي تريد تحسينه، ثم انقر على radio_button_checked إيقاف.
بعد ذلك، يمكنك الاطّلاع على إحصاءات أداة اختيار لغة CSS، كما هو موضّح في الأقسام التالية.
عرض إحصاءات أداة اختيار قواعد CSS لحدث واحد
لعرض إحصاءات أدوات اختيار قواعد CSS المضمّنة في حدث إعادة احتساب النمط:
ابحث عن حدث إعادة احتساب النمط في تسجيل الأداء وانقر عليه.
في القسم السفلي من لوحة الأداء، افتح علامة التبويب إحصاءات أدوات الاختيار.
جدول أدوات اختيار لغة CSS في علامة التبويب "إحصاءات أداة الاختيار"
تحتوي علامة التبويب إحصاءات أداة الاختيار على جدول بأدوات اختيار لغة CSS. يعرض الجدول المعلومات التالية لكل أداة اختيار لغة CSS:
| العمود | الوصف |
|---|---|
| المدّة المنقضية (بالملّي ثانية) | مقدار الوقت الذي يقضيه المتصفّح في مطابقة أداة اختيار لغة CSS هذه. يتم توضيح الوقت بالملي ثانية، حيث تساوي 1 ملي ثانية 1/1000 من الثانية. |
| محاولات المباراة | عدد العناصر التي حاول محرك المتصفّح مطابقتها مع أداة اختيار لغة CSS هذه. |
| عدد التطابقات | عدد العناصر التي تطابقها محرِّك البحث مع أداة اختيار لغة CSS هذه. |
| نسبة حالات عدم التطابق في المسار البطيء | يشير ذلك إلى نسبة العناصر التي لم تتطابق مع أداة اختيار لغة CSS هذه، والعناصر التي حاول محرك المتصفّح مطابقتها، والتي تطلّبت من محرّك المتصفّح استخدام رمز أقل محسّنًا للمطابقة. |
| أداة الاختيار | أداة اختيار لغة CSS التي تمّت مطابقتها. |
| Style Sheet | ورقة أنماط CSS التي تحتوي على أداة اختيار CSS. |
عند الانتهاء، في لوحة الأداء، افتح الإعدادات إعدادات الالتقاط وألغِ تحديد مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.
عرض إحصاءات أداة اختيار قواعد CSS لأحداث متعددة
لعرض الإحصاءات المجمّعة لأدوات اختيار قواعد CSS المضمّنة في أحداث إعادة حساب النمط المتعددة، انسخ جداول إحصاءات أداة الاختيار المتعددة في جدول بيانات، كما يلي:
ابحث عن أول حدث إعادة احتساب النمط الذي يهمّك، ثم انقر عليه.
في القسم السفلي من لوحة الأداء، افتح علامة التبويب إحصاءات أدوات الاختيار.
انقر بزر الماوس الأيمن على جدول إحصاءات أداة الاختيار، ثم اختَر نسخ الجدول.
الصِق الجدول في جدول بيانات، مثل "جداول بيانات Google".
كرِّر الخطوات السابقة مع أحداث إعادة احتساب النمط الأخرى التي تهتم بها.
عند الانتهاء، في لوحة الأداء، افتح الإعدادات إعدادات الالتقاط وألغِ تحديد مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.
عرض إحصاءات أداة اختيار قواعد CSS مجمّعة للتسجيل الكامل
لعرض إحصاءات مجمّعة لأدوات اختيار قواعد CSS التي تتعلّق بتسجيل الأداء بالكامل:
انقر على منطقة فارغة من الرسم البياني اللامعل لإلغاء اختيار أي حدث قد تم اختياره.
اختَر نطاق التسجيل بالكامل. ولإجراء ذلك، انقر مرّتين على الرسم البياني لوحدة المعالجة المركزية (CPU) في أعلى لوحة الأداء.
في القسم السفلي من لوحة الأداء، افتح علامة التبويب إحصاءات أدوات الاختيار. سيظهر صف جديد في أعلى الصفحة يتضمّن بيانات عن القيم الإجمالية لجميع أدوات الاختيار.
عند الانتهاء، في لوحة الأداء، افتح الإعدادات إعدادات الالتقاط وألغِ تحديد مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.
تحليل إحصاءات أداة اختيار لغة CSS
لترتيب البيانات في جدول إحصاءات أدوات الاختيار تصاعديًا أو تنازليًا، انقر على رأس أي عمود. على سبيل المثال، لمعرفة أدوات اختيار لغة CSS التي تستهلك معظم الوقت، انقر على رأس العمود الوقت المنقضي (بالملّي ثانية).
لمحاولة تحسين أداء صفحة الويب، ركِّز على أدوات اختيار لغة CSS التي:
- استغرق احتساب الوقت وقتًا طويلاً (قيمة مرتفعة (بالملّي ثانية)).
- يشير إلى الرمز الذي حاول المتصفّح مطابقته عدة مرات (قيمة مرتفعة لمحاولات المطابقة).
- السبب الذي لم يطابق المتصفح العديد من العناصر بها (قيمة منخفضة لعدد التطابق مقارنةً بقيمة محاولات المطابقة).
- والتي تسجِّل نسبة عالية من حالات عدم التطابق في المسار البطيء.
على سبيل المثال، في لقطة الشاشة السابقة:
- تتطلب أداة اختيار لغة CSS الأولى (
html body .ps[tooltip...) معظم الوقت. - حاول محرّك المتصفح مطابقة أداة اختيار لغة CSS هذه 1, 104 مرة، ولكنّه لم يطابق أي عناصر.
وبالتالي، تكون أداة اختيار لغة CSS هذه هي الخيار الأول الذي يجب محاولة تحسينه.
جرِّب تغيير أدوات اختيار لغة CSS لكي تستغرق وقتًا أقل لاحتساب العناصر ومطابقتها على الصفحة. تعتمد كيفية تحسين أدوات اختيار لغة CSS على حالة استخدامك تحديدًا.
كرِّر الخطوات الواردة في هذا الدليل التوجيهي لتأكيد أن التغييرات التي أجريتها قد ساعدت في تقليل مدة حدث إعادة احتساب النمط في عمود الوقت المنقضي (ملي ثانية).