از مانیتور عملکرد استفاده کنید تا سریعاً از بارگذاری و عملکرد سایت خود ایده بگیرید.
بررسی اجمالی
پانل مانیتور عملکرد یک جدول زمانی نمایش می دهد که معیارهای عملکرد را در زمان واقعی نمودار می کند. روی یک معیار کلیک کنید تا آن را نشان دهید یا پنهان کنید. سپس ببینید که چگونه نمودار با تعامل با برنامه خود تغییر می کند.
مانیتور عملکرد معیارهای زیر را دنبال می کند:
- میزان استفاده از پردازنده.
- اندازه پشته جاوا اسکریپت.
- تعداد کل گره‌های DOM، شنوندگان رویداد جاوا اسکریپت، اسناد و فریم‌ها در صفحه.
- طرح بندی و محاسبه مجدد سبک در هر ثانیه.
پنل نمایشگر عملکرد را باز کنید
برای باز کردن پنل نمایش عملکرد :
- DevTools را باز کنید .
- منوی Command را با فشار دادن:
- macOS: Command + Shift + P
- Windows، Linux، ChromeOS: Control + Shift + P
- شروع به تایپ
Performance monitorکنید، Show Performance monitor را انتخاب کنید و Enter را فشار دهید. DevTools پنل مانیتور Performance را در پایین پنجره DevTools شما نمایش می دهد.
از طرف دیگر، در گوشه بالا سمت راست، more_vert گزینه‌های بیشتر > ابزارهای بیشتر > نظارت بر عملکرد را انتخاب کنید.
از پنل نمایشگر عملکرد استفاده کنید
نمایشگر عملکرد یک ایده کلی از عملکرد زمان اجرا وب سایت شما ارائه می دهد.
مشاهده اینکه چگونه مقادیر متریک با تعامل با وب سایت خود تغییر می کنند، می تواند فرصت هایی را برای بهبود نشان دهد.
یکی از ویژگی های مفید مانیتور عملکرد این است که در طول پیمایش صفحه باقی می ماند. بنابراین، به‌عنوان توسعه‌دهنده فرانت‌اند، می‌توانید با باز کردن نمایشگر عملکرد ، پیمایش در وب‌سایت آن‌ها، و زیر نظر گرفتن گره‌های DOM و معیارهای Layout/sec از مشکلاتی مانند شکست طرح‌بندی جلوگیری کنید.
اگر کاربران زمان بارگذاری کندی را در سایت شما گزارش می دهند، مانیتور عملکرد می تواند به شما در شناسایی مناطق مشکل کمک کند.
به عنوان مثال، افزایش زیاد در استفاده از CPU می تواند به کد ناکارآمد اشاره کند. و به طور کلی، اگر یک صفحه دارای تعداد زیادی شنونده رویداد JS باشد، ممکن است برای آزاد کردن حافظه، کد خود را تغییر دهید و آن اعداد را کاهش دهید.
اگر به تازگی شروع به تجزیه و تحلیل عملکرد کرده اید، مسیر پیشنهادی این است که ابتدا از پنل Lighthouse استفاده کنید و سپس با استفاده از پنل عملکرد یا نمایشگر عملکرد بررسی بیشتری کنید.