مرجع ویژگی های عملکرد

Kayce Basques

Sofia Emelianova

این صفحه مرجع جامعی از ویژگی‌های Chrome DevTools مربوط به تجزیه و تحلیل عملکرد است.

برای آموزش جامع نحوه تجزیه و تحلیل عملکرد یک صفحه با استفاده از Chrome DevTools، به بخش «تجزیه و تحلیل عملکرد زمان اجرا» مراجعه کنید.

صفحه نمایش معیارهای زنده

وقتی برای اولین بار پنل Performance را باز می‌کنید، صفحه Live Metrics به شما نمایش داده می‌شود که خلاصه‌ای از عملکرد صفحه فعلی را با استفاده از سه Core Web Vitals به شما ارائه می‌دهد.

این معیارها همزمان با تعامل شما با صفحه و رفتن به صفحات جدید، به‌روزرسانی می‌شوند. این روش خوبی برای شناسایی مشکلات عملکردی است - به‌ویژه برای INP و CLS اگر فقط در شرایط خاصی ظاهر شوند. هنگامی که یک مشکل عملکردی به‌طور مداوم تکرار می‌شود، می‌توانید ردپایی از آن را ثبت کنید تا جزئیات بیشتری برای اشکال‌زدایی مشکل اصلی به دست آورید.

ویژگی‌های صفحه نمایش معیارهای زنده

صفحه معیارهای زنده علاوه بر معیارها، ویژگی‌های زیر را نیز دارد:

• معیارهای میدانی از CrUX هنگام فعال بودن در پنل معیارهای میدانی .
• خلاصه‌ای از هرگونه تفاوت قابل توجه بین معیارهای محلی و میدانی.
• عنصر LCP که می‌توان با نگه داشتن موس روی آن، این مورد را در صفحه برجسته کرد.
• جزئیات خوشه CLS و نوع INP
• جزئیات بیشتر در مورد نگه داشتن ماوس روی معیارها (برای مثال زیربخش‌های LCP و INP و هیستوگرام‌های میدانی)
• پنل‌های Interactions and Layout Shifts تاریخچه یا تعاملات و تغییرات Layout را ثبت می‌کنند.
• یک پنل معیارهای میدانی که در آن می‌توان داده‌های CrUX را فعال کرد، جزئیات دوره زمانی آن داده‌ها، امکان جابجایی بین داده‌های مبدا و URL (در صورت وجود) و بین داده‌های دسکتاپ و موبایل را مشاهده کرد.
• یک پنل تنظیمات محیطی با راهنمایی برای استفاده از گلوگاه دستگاه، پردازنده و شبکه، بر اساس داده‌های CrUX.

برای جزئیات بیشتر، به پست وبلاگ «نظارت بر عملکرد Core Web Vitals محلی و کاربر واقعی خود در DevTools» مراجعه کنید.

عملکرد رکورد

شما می‌توانید با استفاده از دکمه‌های سمت چپ بالا یا دکمه سمت راست صفحه، زمان اجرا یا عملکرد بارگذاری را ضبط کنید:

عملکرد زمان اجرا را ضبط کنید

وقتی می‌خواهید عملکرد یک صفحه را در حال اجرا، نه در زمان بارگذاری، تجزیه و تحلیل کنید، عملکرد زمان اجرا را ثبت کنید.

1. به صفحه‌ای که می‌خواهید تحلیل کنید بروید.
2. روی تب Performance در DevTools کلیک کنید.
3. روی ضبط کلیک کنید .
4. با صفحه تعامل داشته باشید. DevTools تمام فعالیت‌های صفحه را که در نتیجه تعاملات شما رخ می‌دهد، ثبت می‌کند.
5. دوباره روی ضبط کلیک کنید یا برای توقف ضبط، روی توقف کلیک کنید.

عملکرد بار را ضبط کنید

وقتی می‌خواهید عملکرد یک صفحه را هنگام بارگیری، برخلاف هنگام اجرا، تجزیه و تحلیل کنید، عملکرد بارگیری را ثبت کنید.

1. به صفحه‌ای که می‌خواهید تحلیل کنید بروید.
2. پنل Performance در DevTools را باز کنید.
3. روی ضبط کلیک کنید و دوباره بارگذاری کنید DevTools ابتدا به about:blank می‌رود تا هرگونه اسکرین‌شات و ردپاهای باقی‌مانده را پاک کند. سپس DevTools معیارهای عملکرد را هنگام بارگذاری مجدد صفحه ثبت می‌کند و سپس چند ثانیه پس از اتمام بارگذاری، ضبط را به‌طور خودکار متوقف می‌کند.

DevTools به طور خودکار روی بخشی از ضبط که بیشترین فعالیت در آن رخ داده است، زوم می‌کند.

در این مثال، پنل Performance فعالیت را در حین بارگذاری صفحه نشان می‌دهد.

گرفتن اسکرین شات هنگام فیلمبرداری

برای گرفتن اسکرین‌شات از هر فریم هنگام ضبط، کادر انتخاب Screenshots را فعال کنید.

برای آشنایی با نحوه‌ی تعامل با اسکرین‌شات‌ها، به بخش «مشاهده‌ی اسکرین‌شات» مراجعه کنید.

جمع آوری زباله را هنگام ضبط اجباری کنید

هنگام ضبط صفحه، برای جمع آوری زباله ، روی « جمع آوری زباله» کلیک کنید.

نمایش تنظیمات ضبط

روی تنظیمات ضبط کلیک کنید برای نمایش تنظیمات بیشتر مربوط به نحوه ضبط ضبط‌های عملکرد توسط DevTools.

غیرفعال کردن نمونه‌های جاوا اسکریپت

به طور پیش‌فرض، مسیر اصلی یک ضبط، جزئیات پشته‌های فراخوانی توابع جاوا اسکریپتی که در طول ضبط فراخوانی شده‌اند را نمایش می‌دهد. برای غیرفعال کردن این پشته‌های فراخوانی:

1. تنظیمات ضبط را باز کنید منو. به نمایش تنظیمات ضبط مراجعه کنید.
2. کادر غیرفعال کردن نمونه‌های جاوا اسکریپت را فعال کنید.
3. از صفحه فیلم بگیرید.

تصاویر زیر تفاوت بین غیرفعال کردن و فعال کردن نمونه‌های جاوا اسکریپت را نشان می‌دهند. آهنگ اصلی ضبط هنگام غیرفعال کردن نمونه‌برداری بسیار کوتاه‌تر است، زیرا تمام پشته‌های فراخوانی جاوا اسکریپت را حذف می‌کند.

این مثال یک ضبط با نمونه‌های JS غیرفعال را نشان می‌دهد.

این مثال یک ضبط با نمونه‌های JS فعال را نشان می‌دهد.

هنگام ضبط، شبکه را کنترل کنید

برای محدود کردن سرعت شبکه هنگام ضبط:

1. تنظیمات ضبط را باز کنید منو. به نمایش تنظیمات ضبط مراجعه کنید.
2. شبکه را روی سطح انتخابیِ کاهش سرعت تنظیم کنید.

در منوی کشویی، پنل Performance ممکن است یک تنظیم پیش‌فرض برای کاهش سرعت یا تنظیمی که تجربه کاربران شما را بر اساس داده‌های میدانی تخمین می‌زند، پیشنهاد دهد.

هنگام ضبط، پردازنده را کنترل کنید

برای محدود کردن سرعت پردازنده هنگام ضبط:

1. تنظیمات ضبط را باز کنید منو. به نمایش تنظیمات ضبط مراجعه کنید.
2. پردازنده را روی سطح انتخابی از گلوگاه تنظیم کنید.

کاهش سرعت پردازنده به قابلیت‌های رایانه شما بستگی دارد. برای مثال، گزینه کاهش سرعت ۲ برابری باعث می‌شود پردازنده شما ۲ برابر کندتر از حد معمول خود عمل کند. DevTools نمی‌تواند واقعاً پردازنده‌های دستگاه‌های تلفن همراه را شبیه‌سازی کند، زیرا معماری دستگاه‌های تلفن همراه با معماری رایانه‌های رومیزی و لپ‌تاپ‌ها بسیار متفاوت است.

در منوی کشویی، پنل Performance ممکن است یک تنظیم پیش‌فرض برای کاهش سرعت یا تنظیمی که تجربه کاربران شما را بر اساس داده‌های میدانی تخمین می‌زند، پیشنهاد دهد.

فعال کردن آمار انتخابگر CSS

برای مشاهده آمار انتخابگرهای قوانین CSS خود در طول رویدادهای طولانی مدت Recalculate Style :

1. تنظیمات ضبط را باز کنید منو. به نمایش تنظیمات ضبط مراجعه کنید.
2. کادر فعال کردن آمار انتخابگر CSS را علامت بزنید.

برای جزئیات بیشتر، به نحوه‌ی تجزیه و تحلیل عملکرد انتخابگر CSS در طول رویدادهای Recalculate Style مراجعه کنید.

فعال کردن ابزار دقیق پیشرفته رنگ‌آمیزی

برای مشاهده ابزار دقیق رنگ‌آمیزی:

1. تنظیمات ضبط را باز کنید منو. به نمایش تنظیمات ضبط مراجعه کنید.
2. کادر فعال کردن ابزار دقیق رنگ‌آمیزی پیشرفته را علامت بزنید.

برای یادگیری نحوه تعامل با اطلاعات رنگ‌آمیزی، به مشاهده لایه‌ها و مشاهده پروفایلر رنگ مراجعه کنید.

نمایش آهنگ‌های سفارشی

آهنگ‌های سفارشی را فعال می‌کند که می‌توانند با استفاده از DevTools Extensibility API بیشتر سفارشی شوند.

ضبط قبلی را پاک کنید

پس از ضبط، روی «پاک کردن ضبط» کلیک کنید برای پاک کردن آن ضبط از پنل عملکرد .

تجزیه و تحلیل ضبط اجرا

پس از ثبت عملکرد زمان اجرا یا عملکرد بارگذاری ، پنل عملکرد داده‌های زیادی را برای تجزیه و تحلیل عملکرد آنچه اتفاق افتاده است، ارائه می‌دهد.

حاشیه‌نویسی یک فایل صوتی و اشتراک‌گذاری آن

به بخش «یادداشت‌برداری» مراجعه کنید و یافته‌های عملکرد خود را به اشتراک بگذارید .

بینش‌های عملی دریافت کنید

پنل Performance شامل بینش‌های عملکردی است که در گزارش‌های Lighthouse نیز مشاهده می‌شوند. این بینش‌ها می‌توانند راه‌هایی برای بهبود عملکرد پیشنهاد دهند و تجزیه و تحلیل‌های هدایت‌شده‌ای را در مورد مسائل عملکردی زیر مانند زیربخش‌های LCP و INP، مشکلات کشف درخواست LCP، اشخاص ثالث و همچنین منابع جاوا اسکریپت قدیمی و تکراری ارائه دهند. برای مشاهده لیست کامل، به مستندات Performance Insights مراجعه کنید.

بینش‌ها زمانی پذیرفته می‌شوند که هیچ مشکلی شناسایی نشده باشد. برگه بینش‌ها ، آنها را در زیر بخش بینش‌های پذیرفته‌شده در پایین فهرست می‌کند. بینش‌هایی که پذیرفته نشده‌اند، در بخش‌های اختصاصی خود فهرست شده‌اند.

برای استفاده از بینش‌ها:

1. یک ضبط اجرا انجام دهید .
2. در نوار کناری سمت چپ پنل Performance ، تب Insights را باز کنید، بخش‌های مختلف را باز کنید و موس را روی موارد نگه دارید و روی آنها کلیک کنید. پنل Performance رویدادهای مربوطه را در ردیابی برجسته می‌کند.

پیمایش ضبط

برای کمک به پیمایش شما، وقتی نشانگر ماوس را روی رد عملکرد نگه می‌دارید، پنل عملکرد موارد زیر را انجام می‌دهد:

• وقتی نشانگر ماوس را روی نمای کلی Timeline نگه می‌دارید، یک نشانگر عمودی به شما نشان می‌دهد که کل رد عملکرد را در بر می‌گیرد.
• وقتی نشانگر ماوس را روی موارد موجود در مسیر اصلی نگه می‌دارید، یک محدوده را در نمای کلی Timeline هایلایت می‌کند.

برای بررسی دقیق ضبط عملکرد خود، می‌توانید بخشی از ضبط را انتخاب کنید، یک نمودار شعله‌ای طولانی را پیمایش کنید، بزرگنمایی و کوچکنمایی کنید و از نشانگرهای مسیر برای پرش بین سطوح بزرگنمایی استفاده کنید.

استفاده از میانبرهای صفحه کلید برای پیمایش

برای استفاده از میانبرهای صفحه کلید برای پیمایش سریع در ضبط، ابتدا سبک پیمایش صفحه کلید مورد نظر خود را انتخاب کنید.

در گوشه بالا سمت راست پنل، روی گزینه «کمک، نمایش میانبرها» کلیک کنید و یکی از موارد زیر را انتخاب کنید:

• کلاسیک : بزرگنمایی با چرخ ماوس (صفحه لمسی به بالا یا پایین) و پیمایش عمودی با Shift + چرخ ماوس.
• مدرن : اسکرول عمودی با چرخ ماوس، اسکرول افقی با Shift + چرخ ماوس، و زوم با Command/Control + چرخ ماوس.

پنجره‌ی میانبرها همچنین یک فهرست از میانبرهای موجود را در اختیار شما قرار می‌دهد.

انتخاب بخشی از ضبط

در زیر نوار عملکرد پنل Performance و در بالای ضبط، می‌توانید بخش نمای کلی Timeline را با نمودارهای CPU و NET مشاهده کنید.

برای انتخاب بخشی از یک ضبط، کلیک کنید و نگه دارید، سپس در نمای کلی Timeline به چپ یا راست بکشید.

برای انتخاب یک بخش با استفاده از صفحه کلید:

1. روی مسیر اصلی یا هر یک از مسیرهای مجاور آن فوکوس کنید.
2. برای بزرگنمایی، حرکت به چپ، کوچکنمایی و حرکت به راست به ترتیب از کلیدهای W ، A ، S و D استفاده کنید.

برای انتخاب یک بخش با استفاده از ترک‌پد:

1. نشانگر ماوس را روی بخش نمای کلی جدول زمانی یا هر یک از آهنگ‌ها ( آهنگ اصلی و همسایه‌هایش) نگه دارید.
2. با استفاده از دو انگشت، برای کوچک‌نمایی، به سمت بالا بکشید، برای حرکت به چپ، به سمت پایین بکشید تا بزرگنمایی کنید و برای حرکت به راست، به سمت راست بکشید.

ایجاد breadcrumbs و پرش بین سطوح بزرگنمایی

نمای کلی Timeline به شما امکان می‌دهد چندین breadcrumbs تو در تو را به صورت متوالی ایجاد کنید، سطح بزرگنمایی را افزایش دهید و سپس آزادانه بین سطوح بزرگنمایی جابجا شوید.

برای ایجاد و استفاده از breadcrumbs:

1. در نمای کلی Timeline ، بخشی از ضبط را انتخاب کنید .
2. موس را روی قسمت انتخاب شده نگه دارید و روی دکمه بزرگنمایی N میلی‌ثانیه کلیک کنید. قسمت انتخاب شده گسترش می‌یابد تا نمای کلی Timeline را پر کند. زنجیره‌ای از breadcrumbs در بالای نمای کلی Timeline شروع به ساخته شدن می‌کند.
3. دو مرحله قبلی را برای ایجاد یک breadcrumb تو در تو دیگر تکرار کنید. تا زمانی که محدوده انتخاب بیشتر از ۵ میلی‌ثانیه باشد، می‌توانید به ایجاد breadcrumb تو در تو ادامه دهید.
4. برای پرش به سطح بزرگنمایی انتخاب شده، روی نشانگر مربوطه در زنجیره بالای نمای کلی Timeline کلیک کنید.

برای حذف زیرمجموعه‌های یک breadcrumb، روی breadcrumb والد کلیک راست کرده و گزینه Remove child breadcrumbs را انتخاب کنید.

نمودار شعله بلند را پیمایش کنید

برای پیمایش نمودار شعله‌های بلند در مسیر اصلی یا هر یک از همسایه‌های آن، کلیک کنید و نگه دارید، سپس به هر جهتی بکشید تا آنچه به دنبالش هستید نمایان شود.

اسکریپت‌های نامربوط را در نمودار شعله‌ای نادیده بگیرید

برای تمرکز بهتر روی کد خود، می‌توانید اسکریپت‌های نامربوط را به لیست نادیده گرفتن اضافه کنید.

برای نادیده گرفتن اسکریپت‌ها، یکی از موارد زیر را انجام دهید:

• روی گزینه‌ی «فشرده‌سازی» (compress) کلیک کنید و در نوار عملیات بالا، دیالوگ «نمایش تنظیمات لیست نادیده گرفته شده» (Show ignore list settings) را نمایش دهید و یک عبارت منظم (regular expression) در فیلد ورودی تایپ کنید. نمودار شعله‌ای (flame chart) همزمان با تایپ شما، قانون جدید را اعمال خواهد کرد.
• روی یک اسکریپت کلیک راست کنید و گزینه «افزودن اسکریپت به لیست نادیده گرفته شده» را انتخاب کنید. پنل Performance این اسکریپت را به لیست موجود در کادر محاوره‌ای «فشرده‌سازی، نمایش نادیده گرفته شده، تنظیمات لیست» اضافه می‌کند.

این پنل به طور خودکار اسکریپت‌های تودرتوی اضافی را برای چنین اسکریپت‌هایی از بین می‌برد و آنها را به عنوان On ignore list ( REGULAR_EXPRESSION ) علامت‌گذاری می‌کند.

در کادر محاوره‌ای تنظیمات فهرست نادیده گرفته شده در حالت فشرده‌سازی ، می‌توانید قوانین فهرست نادیده گرفته شده را فعال یا غیرفعال کنید.

برای حذف یک اسکریپت از لیست نادیده گرفته شده، روی آن در نمودار شعله‌ای کلیک راست کرده و گزینه «حذف اسکریپت از لیست نادیده گرفته شده» را انتخاب کنید یا در کادر محاوره‌ای «فشرده‌سازی، نمایش تنظیمات لیست نادیده گرفته شده» موس را روی آن نگه دارید و روی «حذف، حذف» کلیک کنید.

DevTools قوانین لیست نادیده گرفته شده را که در تنظیمات اضافه می‌کنید، ذخیره می‌کند. تنظیمات > لیست نادیده گرفته شده .

علاوه بر این، برای تمرکز فقط روی اسکریپت‌های شخص ثالث، تیک گزینه Dim 3rd parties را بزنید. پنل Performance اسکریپت‌های شخص ثالث را خاکستری می‌کند.

فعالیت‌های جستجو

شما می‌توانید در مسیر اصلی ، فعالیت‌ها و در مسیر شبکه، درخواست‌ها را جستجو کنید.

برای باز کردن کادر جستجو در پایین پنل Performance ، موارد زیر را فشار دهید:

• مک‌او‌اس: فرمان + F
• ویندوز، لینوکس: کنترل + F

این مثال یک عبارت منظم را در کادر جستجو در پایین نشان می‌دهد که هر فعالیتی را که با E شروع می‌شود، پیدا می‌کند.

برای مرور فعالیت‌هایی که با عبارت جستجوی شما مطابقت دارند:

• روی دکمه‌های expand_less قبلی یا expand_more بعدی کلیک کنید.
• برای انتخاب مورد قبلی ، Shift + Enter و برای انتخاب مورد بعدی، Enter را فشار دهید.

پنل عملکرد ، یک راهنمای ابزار (tooltip) روی فعالیت انتخاب شده در کادر جستجو نشان می‌دهد.

برای تغییر تنظیمات پرس و جو:

• برای حساس کردن پرس‌وجو به حروف بزرگ و کوچک ، روی match_case کلیک کنید.
• برای استفاده از یک عبارت منظم در کوئری خود، روی regular_expression عبارت منظم کلیک کنید.

برای پنهان کردن کادر جستجو، روی «لغو» کلیک کنید.

تغییر ترتیب آهنگ‌ها و پنهان کردن آنها

برای مرتب کردن رد عملکرد، می‌توانید ترتیب آهنگ‌ها را تغییر دهید و موارد بی‌ربط را در حالت پیکربندی آهنگ پنهان کنید.

برای جابجایی و پنهان کردن آهنگ‌ها:

1. برای ورود به حالت پیکربندی، روی نام آهنگ کلیک راست کرده و گزینه Configure tracks را انتخاب کنید.
2. برای حرکت دادن یک مسیر به بالا یا پایین، روی arrow_upward up یا arrow_downward down کلیک کنید. برای پنهان کردن آن، روی visibility_off کلیک کنید.
3. پس از اتمام، برای خروج از حالت پیکربندی، روی Finish configuring tracks در پایین کلیک کنید.

برای مشاهده‌ی این گردش کار در عمل، ویدیو را تماشا کنید.

پنل Performance پیکربندی مسیر را برای ردیابی‌های جدید ذخیره می‌کند، اما در جلسات بعدی DevTools این کار را نمی‌کند.

مشاهده فعالیت تاپیک اصلی

برای مشاهده فعالیت‌هایی که در رشته اصلی صفحه رخ داده است، از مسیر اصلی استفاده کنید.

برای مشاهده اطلاعات بیشتر در مورد یک رویداد در برگه خلاصه ، روی آن کلیک کنید، از جمله اما نه محدود به: مدت زمان (و مدت زمان خود رویداد)، پیوند به خط مربوطه در اسکریپت منبع، URL مبدا (همراه با نام موجودیت، در صورت وجود)، ردیابی پشته، در صورت وجود، و تفکیک زمان‌بندی‌ها در یک نمودار دایره‌ای.

پنل Performance ، رویداد انتخاب شده را با رنگ آبی مشخص می‌کند.

این مثال اطلاعات بیشتری در مورد رویداد فراخوانی تابع get در تب Summary نشان می‌دهد.

بین رویدادهای شخص اول و شخص ثالث تمایز قائل شوید

اتکای بیش از حد به کدهای شخص ثالث می‌تواند تأثیر منفی بر عملکرد بارگذاری داشته باشد. پنل Performance می‌تواند به شما کمک کند تا به صورت بصری بین رویدادهای شخص ثالث و شخص ثالث در ردیابی تمایز قائل شوید، بنابراین می‌توانید تصمیم آگاهانه‌تری در مورد کاهش یا به تعویق انداختن بارگذاری کدهای شخص ثالث برای اولویت‌بندی محتوای صفحه خود بگیرید.

برای تمرکز فقط روی عملکرد کد شخص ثالث:

1. مطمئن شوید که هیچ گزینه‌ای در ردگیری عملکرد یا در تب Insights انتخاب نشده باشد. برای انجام این کار، روی یک فضای خالی در ردگیری کلیک کنید.
2. تیک گزینه Dim 3rd parties را در نوار عملکرد بالا بزنید. پنل Performance رویدادهای مربوط به third-party را از ردیابی عملکرد خاکستری می‌کند و فقط first-party را هایلایت شده باقی می‌گذارد.

رویدادها را با جدول «شخص اول / شخص ثالث» برجسته کنید

در یک محدوده انتخاب شده در نمای کلی Timeline و زمانی که هیچ یک از رویدادها انتخاب نشده باشند، تب Summary یک جدول شخص ثالث / شخص ثالث را نشان می‌دهد که حجم انتقال مربوطه و زمان‌های اصلی thread مربوط به موارد زیر را فهرست می‌کند:

• نهاد شخص اول که با نشان 1st party مشخص شده است.
• همه موجودیت‌های شخص ثالث شناسایی‌شده در محدوده انتخاب‌شده، بدون علامت.
• افزونه‌هایی که با نشان Extension مشخص شده‌اند.
• سایر موجودیت‌های [unattributed] .

برای مشاهده رویدادهای مرتبط که در نمودار برجسته شده‌اند و بقیه خاکستری شده‌اند، نشانگر ماوس را روی موجودیت‌های موجود در جدول نگه دارید. برای برجسته کردن رویدادهای یک موجودیت، آن را در جدول انتخاب کنید. برای حذف برجسته‌سازی، روی هر فضای خالی در نمودار کلیک کنید.

برای باز کردن فعالیت‌های گروه‌بندی‌شده بر اساس این موجودیت در تب Bottom-up ، نشانگر ماوس را روی موجودیت مورد نظر در جدول نگه دارید و روی account_tree Bottom-up در کنار آن کلیک کنید.

نمودار شعله را بخوانید

پنل Performance فعالیت نخ اصلی را در یک نمودار شعله‌ای نشان می‌دهد. محور x نشان‌دهنده ضبط در طول زمان است. محور y نشان‌دهنده پشته فراخوانی است. رویدادهای بالا باعث رویدادهای پایین می‌شوند.