پانل Performance هر کار طولانی مدت را با یک مثلث قرمز در گوشه بالا سمت راست و یک اخطار در برگه Summary علامت‌گذاری می‌کند تا کار روی رشته اصلی را نشان دهد که اجرای آن زمان زیادی طول می‌کشد و عملکرد کندی دارد:
در ضبط‌های عملکرد شما، برخی از این وظایف طولانی مدت ممکن است رویدادهای سبک محاسبه مجدد باشد. یک رویداد Recalculate Style زمان لازم برای انجام کارهای زیر را برای مرورگر ردیابی می کند:
- برای یافتن تمام قوانین سبک CSS که با یک عنصر مشخص مطابقت دارند، عناصر DOM را در یک صفحه تکرار کنید.
- سبک واقعی هر عنصر را بر اساس قوانین سبک CSS منطبق محاسبه کنید.
هر زمان که کاربرد قوانین CSS ممکن است تغییر کرده باشد، باید سبک‌های CSS دوباره محاسبه شوند، مانند موارد زیر:
- عناصر به DOM اضافه یا از آن حذف می شوند.
- ویژگی های یک عنصر مانند مقدار یک کلاس یا ویژگی ID تغییر می کند.
- کاربر ورودی ایجاد می کند، مانند حرکت ماوس یا تغییر تمرکز عنصر، که می تواند بر قوانین
:hoverتأثیر بگذارد.
رویدادهای طولانی‌مدت محاسبه مجدد سبک می‌تواند برای عملکرد مشکل‌ساز باشد و می‌تواند دلیل تأخیر طولانی ارائه باشد که بر تعامل وب‌سایت شما با رنگ بعدی (INP) تأثیر می‌گذارد. اگر رویدادهای Recalculate Style طولانی مدت را پیدا کردید، می توانید از برگه Selector Stats استفاده کنید تا بفهمید کدام یک از انتخابگرهای CSS شما بیشترین زمان را می گیرد و عملکرد را کاهش می دهد.
برگه Stats Selector آماری را در مورد انتخابگرهای قوانین CSS که در یک یا چند رویداد Recalculate Style در یک ضبط عملکرد دخیل بوده اند ارائه می دهد.
با فعال بودن Selector Stats، یک رد عملکرد ضبط کنید
برای مشاهده آمار انتخابگرهای قوانین CSS خود در طول رویدادهای طولانی مدت محاسبه مجدد سبک ، با روشن بودن تنظیم ضبط آمار انتخابگر، یک ردیابی عملکرد ثبت کنید.
برای ثبت ردیابی عملکرد با آمار انتخابگر:
یک صفحه وب، به عنوان مثال، صفحه نمایشی گالری عکس را باز کنید.
DevTools را باز کنید و به پنل Performance بروید.
در پانل عملکرد ، روی دکمه تنظیمات ضبط تنظیمات کلیک کنید و کادر را علامت بزنید Enable CSS selector stats .
روی radio_button_checked Record کلیک کنید، سناریویی را که می‌خواهید بهبود دهید اجرا کنید، سپس روی stop_circle Stop کلیک کنید.
سپس، همانطور که در بخش های بعدی توضیح داده شد، آمار انتخابگر CSS را مشاهده کنید.
آمار انتخابگر قانون CSS را برای یک رویداد مشاهده کنید
برای مشاهده آمار انتخابگرهای قوانین CSS که در یک رویداد Recalculate Style درگیر هستند:
یک رویداد Recalculate Style را در ضبط عملکرد خود پیدا کنید و روی آن کلیک کنید.
در قسمت پایین پنل عملکرد ، تب Selector Stats را باز کنید.
جدول انتخابگرهای CSS در تب Selector Stats
برگه Selector Stats حاوی جدولی از انتخابگرهای CSS است. جدول اطلاعات زیر را برای هر انتخابگر CSS نشان می دهد:
| ستون | توضیحات |
|---|---|
| سپری شده (ms) | مدت زمانی که مرورگر صرف مطابقت با این انتخابگر CSS کرده است. این زمان بر حسب میلی ثانیه (ms) داده می شود که 1 میلی ثانیه برابر با 1/1000 ثانیه است. |
| تلاش های مطابقت | تعداد عناصری که موتور مرورگر سعی کرد با این انتخابگر CSS مطابقت دهد. |
| تعداد مسابقه | تعداد عناصری که موتور مرورگر با این انتخابگر CSS مطابقت داده است. |
| ٪ از منطبق نشدن مسیر آهسته | نسبت عناصری که با این انتخابگر CSS مطابقت نداشتند، به عناصری که موتور مرورگر سعی کرد مطابقت دهد و موتور مرورگر را ملزم به استفاده از کد بهینه‌سازی کمتری برای مطابقت داشت. |
| انتخابگر | انتخابگر CSS که مطابقت داشت. |
| برگه سبک | برگه سبک CSS که حاوی انتخابگر CSS است. |
پس از اتمام، در پانل عملکرد ، تنظیمات را باز کنید و تنظیمات عکسبرداری را باز کنید و کادر چک را پاک کنید Enable CSS selector stats .
مشاهده آمار انتخابگر قانون CSS برای چندین رویداد
برای مشاهده آمار انبوهی از انتخابگرهای قانون CSS که در چندین رویداد Recalculate Style دخیل هستند، چندین جداول Selector Stats را به صورت زیر در یک صفحه گسترده کپی کنید:
اولین رویداد Recalculate Style را که به آن علاقه دارید پیدا کنید و سپس روی آن کلیک کنید.
در قسمت پایین پنل عملکرد ، تب Selector Stats را باز کنید.
روی جدول آمار انتخابگر راست کلیک کرده و Copy table را انتخاب کنید.
جدول را در یک صفحه گسترده مانند Google Sheets جای‌گذاری کنید.
مراحل قبلی را با دیگر رویدادهای Recalculate Style که به آنها علاقه دارید تکرار کنید.
پس از اتمام، در پانل عملکرد ، تنظیمات را باز کنید و تنظیمات عکسبرداری را باز کنید و کادر چک را پاک کنید Enable CSS selector stats .
آمار کل انتخابگر قانون CSS را برای ضبط کامل مشاهده کنید
برای مشاهده آمار کل انتخابگرهای قوانین CSS که در کل ضبط عملکرد نقش دارند:
برای لغو انتخاب هر رویدادی که ممکن است انتخاب شود، روی یک ناحیه خالی از نمودار شعله کلیک کنید.
کل محدوده ضبط را انتخاب کنید. برای انجام این کار، روی نمودار CPU در بالای پنل Performance دوبار کلیک کنید.
در قسمت پایین پنل عملکرد ، تب Selector Stats را باز کنید. یک ردیف جدید در بالا با داده های کل برای همه انتخابگرها خواهید دید.
پس از اتمام، در پانل عملکرد ، تنظیمات را باز کنید و تنظیمات عکسبرداری را باز کنید و کادر چک را پاک کنید Enable CSS selector stats .
تجزیه و تحلیل آمار انتخابگر CSS
برای مرتب‌سازی داده‌های جدول آمار انتخابگر به ترتیب صعودی یا نزولی، روی عنوان ستون کلیک کنید. برای مثال، برای اینکه ببینید کدام انتخابگرهای CSS بیشترین زمان را می‌گیرند، روی سربرگ ستون Elapsed (ms) کلیک کنید.
برای تلاش برای بهبود عملکرد صفحه وب خود، روی انتخابگرهای CSS تمرکز کنید که:
- مدت زیادی طول کشید تا محاسبه شود (مقدار سپری شده (ms) بالا).
- که مرورگر بارها سعی کرد با آن مطابقت کند (مقدار تلاش های مطابقت بالا).
- که در واقع مرورگر با بسیاری از عناصر مطابقت نداشت (مقدار تعداد تطابق کم در مقایسه با مقدار Match Attempts ).
- که دارای درصد بالایی از مسیر آهسته غیر منطبق هستند.
به عنوان مثال، در تصویر قبلی:
- اولین انتخابگر CSS (
html body .ps[tooltip...) به بیشترین زمان نیاز داشت. - موتور مرورگر 1104 بار تلاش کرد این انتخابگر CSS را مطابقت دهد، اما با هیچ عنصری مطابقت نداشت.
بنابراین، این انتخابگر CSS اولین نامزدی است که سعی در بهبود دارد.
سعی کنید انتخابگرهای CSS خود را تغییر دهید تا زمان کمتری برای محاسبه و مطابقت عناصر کمتر در صفحه نیاز داشته باشند. نحوه بهبود انتخابگرهای CSS به مورد خاص شما بستگی دارد.
مراحل این آموزش را تکرار کنید تا تأیید کنید که تغییرات شما به کاهش مدت زمان رویداد Style Recalculate Style در ستون سپری شده (ms) کمک کرده است.