از پنل Performance برای تجزیه و تحلیل عملکرد وب سایت خود استفاده کنید.
نمای کلی
پنل Performance به شما امکان می دهد پروفایل های عملکرد CPU برنامه های وب خود را ضبط کنید. پروفایل ها را برای یافتن گلوگاه های بالقوه عملکرد و راه هایی که می توانید استفاده از منابع را بهینه کنید، تجزیه و تحلیل کنید.
برای انجام کارهای زیر از پنل Performance استفاده کنید:
- یک نمایه عملکرد ثبت کنید.
- تنظیمات عکسبرداری را تغییر دهید
- تجزیه و تحلیل گزارش عملکرد
برای راهنمای جامع در مورد بهبود عملکرد وب سایت خود، به تجزیه و تحلیل عملکرد زمان اجرا مراجعه کنید.
پنل Performance را باز کنید
برای باز کردن پنل Performance ، DevTools را باز کنید و از مجموعه ای از تب ها در بالا، Performance را انتخاب کنید.
یا برای باز کردن پنل Performance با منوی Command مراحل زیر را دنبال کنید:
- DevTools را باز کنید .
- منوی Command را با فشار دادن:
- macOS: Command + Shift + P
- Windows، Linux، ChromeOS: Control + Shift + P
- شروع به تایپ
Performance panelکنید، Show Performance panel را انتخاب کنید و Enter را فشار دهید.
یک نمایه عملکرد ثبت کنید
وقتی آماده ضبط هستید، پنل Performance گزینه های زیر را در اختیار شما قرار می دهد:
- عملکرد زمان اجرا را ضبط کنید
- رکورد عملکرد بار
- هنگام ضبط، اسکرین شات بگیرید
- اجباری به جمع آوری زباله در حین ضبط
- ذخیره یک ضبط
- یک ضبط را بارگیری کنید
- یک ضبط را پاک کنید
تنظیمات عکسبرداری را تغییر دهید
تنظیمات ضبط به شما امکان میدهد نحوه ضبط عملکرد DevTools را تغییر دهید و میتواند اطلاعات بیشتری را در گزارش به شما بدهد. برای دسترسی به منوی تنظیمات ضبط، روی تنظیمات عکسبرداری کلیک کنید.
از منوی تنظیمات Capture گزینه های زیر را انتخاب کنید:
- غیرفعال کردن نمونههای جاوا اسکریپت : ضبط پشتههای تماس جاوا اسکریپت نمایش داده شده در مسیر اصلی را که در حین ضبط فراخوانی میشوند، غیرفعال میکند. سربار عملکرد را کاهش خواهد داد.
- فعال کردن ابزار دقیق رنگ پیشرفته (آهسته) : ابزار دقیق رنگ را ضبط می کند. به طور قابل توجهی مانع عملکرد می شود.
- فعال کردن آمار انتخابگر CSS (آهسته) : آمار انتخابگر CSS را ضبط می کند. به طور قابل توجهی مانع عملکرد می شود.
- throttling CPU : سرعت های پایین تر CPU را شبیه سازی کنید.
- throttling شبکه : شبیه سازی سرعت پایین تر شبکه.
- همزمانی سخت افزار : مقدار گزارش شده توسط
navigator.hardwareConcurrencyرا پیکربندی کنید.
تجزیه و تحلیل گزارش عملکرد
برای راهنمای کامل نحوه استفاده از پانل عملکرد ، به تجزیه و تحلیل ضبط عملکرد مراجعه کنید.
در زیر مجموعه ای از موضوعات از راهنما، به همراه سایر اسناد مفید ارائه شده است:
برای یادگیری نحوه پیمایش گزارش:
برای یادگیری نحوه تمرکز بر روی آنچه برای گردش کار شما مهم است:
- ترتیب آهنگ ها را تغییر دهید و آنها را پنهان کنید
- توابع و فرزندان آنها را در نمودار شعله پنهان کنید
- پودر سوخاری ایجاد کنید و بین سطوح بزرگنمایی بپرید
برای آشنایی با برگه های پایین به بالا، درخت تماس و گزارش رویداد:
برای یادگیری نحوه تجزیه و تحلیل گزارش:
- مشاهده فعالیت موضوع اصلی
- نمودار شعله را بخوانید
- مشاهده اسکرین شات
- مشاهده معیارهای حافظه
- مدت زمان بخشی از ضبط را مشاهده کنید
- عملکرد انتخابگر CSS را در طول رویدادهای سبک محاسبه مجدد تجزیه و تحلیل کنید
- عملکرد Profile Node.js با پنل Performance
- تجزیه و تحلیل فریم در ثانیه (FPS)
- مرجع رویداد خط زمانی
با این پنل ها عملکرد را بهبود ببخشید
پانل های دیگری را کشف کنید که می توانند به شما در بهبود عملکرد وب سایت خود کمک کنند: