تعرض لوحة الأداء كلّ مهمة طويلة الأمد بمثلث أحمر في أعلى يسار الصفحة وتحذيرًا في علامة التبويب الملخّص للإشارة إلى العمل الذي يتم تنفيذه في سلسلة المحادثات الرئيسية التي يستغرق تنفيذها وقتًا طويلاً وتبطئ أداءها:
في تسجيلات الأداء، قد تكون بعض هذه المهام طويلة الأمد أحداث إعادة احتساب النمط. يتتبّع حدث إعادة احتساب النمط الوقت الذي يستغرقه المتصفّح لتنفيذ ما يلي:
- يمكنك التكرار خلال عناصر DOM في الصفحة للعثور على جميع قواعد نمط CSS التي تتطابق مع عنصر معيّن.
- يمكنك احتساب النمط الفعلي لكل عنصر استنادًا إلى قواعد أنماط CSS المطابقة.
يجب إعادة احتساب أنماط CSS عند تغيير مدى قابلية تطبيق قواعد CSS، على سبيل المثال في الحالات التالية:
- تتم إضافة العناصر إلى DOM أو إزالتها منه.
- تتغيّر سمات عنصر، مثل قيمة الفئة أو سمة المعرّف.
- يُدخل المستخدم إدخالات، مثل تحريك الماوس أو تغيير تركيز العنصر، ما قد يؤثر في قواعد
:hover.
قد تسبب أحداث إعادة احتساب النمط التي تستمر لفترة طويلة مشاكل في الأداء، ويمكن أن تؤدي إلى تأخرات طويلة في العرض التقديمي تؤثر في مدى استجابة الصفحة لتفاعلات المستخدم (INP) على موقعك الإلكتروني. إذا اكتشفت أنّ أحداث إعادة حساب النمط طويلة الأمد، يمكنك استخدام علامة التبويب إحصاءات أداة الاختيار لمعرفة أدوات اختيار لغة 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 هذه 1104 مرة، ولكنّه لم يطابق أي عناصر.
ولذلك، تكون أداة اختيار لغة CSS هذه هي أول مرشّح لمحاولة تحسينه.
حاوِل تغيير أدوات اختيار لغة CSS لكي تستغرق وقتًا أقل لاحتساب عدد العناصر في الصفحة ومطابقتها. تعتمد كيفية تحسين أدوات اختيار لغة CSS على حالة استخدامك المحدّدة.
كرِّر الخطوات الواردة في هذا الدليل التوجيهي للتأكُّد من أنّ التغييرات التي أجريتها قد ساهمت في تقليل مدة حدث إعادة حساب النمط، في العمود الفترة المنقضية (بالملّي ثانية).