نمای کلی
می‌خواهید اطلاعات آماری دقیق‌تری درباره عملکرد برنامه‌تان فراتر از سنجه‌های داخلی مرورگر داشته باشید؟ اکنون پانل عملکرد به شما امکان می‌دهد داده‌های عملکرد خودتان را مستقیماً به خط زمان اضافه کنید. چه نویسنده چارچوبی باشید که نیاز به تجسم فرایندهای داخلی دارد، چه توسعه‌دهنده کتابخانه‌ای باشید که تأثیر کد خود را ردیابی می‌کند، یا درحال ساختن برنامه‌ای پیچیده با ابزار سفارشی باشید، API توسعه‌پذیری عملکرد ابزارهایی را برای به‌دست آوردن درک واقعاً جامع از آنچه در پشت صحنه اتفاق می‌افتد ارائه می‌دهد.
با تزریق کردن سنجه‌ها و رویدادهای سفارشی‌تان، می‌توانید تجسم‌های سفارشی‌شده‌ای در پانل آشنای عملکرد ایجاد کنید. تصور کنید رویدادهای چرخه حیات عنصر چارچوب خود را در کنار سنجه‌های عملکرد مرورگر استاندارد ببینید، یا جریان اجرای موتور پردازنده سفارشی خود را در هماهنگی کامل با خط لوله پردازنده مرورگر ردیابی کنید.
این API دو رویکرد برای دستیابی به این هدف ارائه می‌دهد:
۱. console.timeStamp API (extended for DevTools)
این API روشی با عملکرد بالا برای ابزاربندی برنامه‌ها و نمایش داده‌های زمان‌بندی منحصراً در پانل عملکرد در DevTools ارائه می‌دهد. این ابزار برای حداقل سربار زمان اجرا طراحی شده است، که آن را برای ابزارسازی مسیرهای داغ و نسخه‌های تولید مناسب می‌کند. این روش ورودی‌ها را به خط زمان عملکرد داخلی مرورگر اضافه نمی‌کند.
۲. User Timings API (بااستفاده از performance.mark و performance.measure)
این میانای برنامه‌سازی کاربردی از میانای برنامه‌سازی کاربردی زمان‌بندی‌های کاربر موجود استفاده می‌کند. همچنین ورودی‌هایی به خط زمان عملکرد داخلی مرورگر اضافه می‌کند که امکان تجزیه‌وتحلیل بیشتر و ادغام با ابزارهای عملکرد دیگر را فراهم می‌کند.
مزایای کلیدی
هر دو میانای برنامه‌سازی کاربردی این موارد را ارائه می‌دهند:
- قطعه‌های سفارشی: قطعه‌ها و گروه‌های قطعه اختصاصی اضافه کنید تا جنبه‌های عملکردی منحصربه‌فرد کدتان را نشان دهید.
- ورودی‌ها: این قطعه‌ها را با ورودی‌هایی پر کنید که رویدادهای مهم یا مدت‌زمان عملیات خاصی را به‌وضوح مشخص می‌کنند.
- سفارشی‌سازی رنگ: از کدگذاری رنگی برای تشخیص بصری انواع مختلف رویدادها یا اندازه‌گیری‌ها در یک نگاه استفاده کنید.
انتخاب API مناسب برای نیازهای شما:
میانای برنامه‌سازی کاربردی
console.timeStamp:- تأثیر ابزارگری بر عملکرد، به‌ویژه در نسخه‌های تولید، یکی از نگرانی‌های اصلی است.
- شما به روشی سریع و کارآمد برای علامت‌گذاری مدت‌ها یا رویدادها بدون نیاز به فراداده اضافی نیاز دارید.
- فقط به داده‌ها نیاز دارید تا در پانل «عملکرد» به‌تصویر کشیده شود.
User Timings API (
performance.mark،performance.measure):- وقتی نیاز دارید داده‌های اضافی را با هر ورودی ذخیره کنید و وقتی ازقبل از User Timings API استفاده می‌کنید، از این روش استفاده کنید.
- باید داده‌های غنی (نکته‌ابزارها، ویژگی‌های دقیق) را با ورودی‌های عملکردتان مرتبط کنید.
- می‌خواهید نشانگرهای دیداری اضافه کنید تا لحظات خاصی را برجسته کنید.
- شما نیاز دارید که داده‌ها نه تنها در DevTools بلکه در جدول زمانی عملکرد داخلی مرورگر نیز برای تجزیه‌وتحلیل گسترده‌تر یا ابزارهای دیگر دردسترس باشند.
- ازقبل با User Timings API آشنا هستید یا از آن استفاده می‌کنید.
تزریق داده‌های شما با console.timeStamp
میانای برنامه‌سازی کاربردی console.timeStamp گسترش یافته است تا امکان ایجاد ورودی‌های زمان‌بندی سفارشی در پانل عملکرد با حداقل سربار فراهم شود، به‌ویژه زمانی‌که DevTools ردیابی را ضبط نمی‌کند.
console.timeStamp(label: string, start?: string|number, end?: string|number, trackName?: string, trackGroup?: string, color?: DevToolsColor);
label:برچسب ورودی زمان‌بندی.
start(اختیاری):اگر به‌عنوان رشته تعریف شده باشد: نام مُهر زمان قبلاً ضبط‌شده (بااستفاده از
console.timeStamp(timeStampName)).اگر به‌عنوان عدد تعریف شده باشد: مُهر زمان برحسب میلی‌ثانیه نسبت‌به Performance.timeOrigin (برای مثال، گرفته‌شده با
performance.now()) که نشان‌دهنده زمان شروع ورودی زمان‌بندی است.اگر تعریف نشده باشد، زمان فعلی به‌عنوان زمان شروع استفاده می‌شود.
end:اگر به‌عنوان رشته تعریف شده باشد: نام مُهر زمان قبلاً ضبط‌شده.
اگر به‌عنوان عدد تعریف شده باشد: مُهر زمانی برحسب میلی‌ثانیه نسبت‌به Performance.timeOrigin (برای مثال، با
performance.now()گرفته شده است) که نشان‌دهنده زمان پایان ورودی زمان‌بندی است.اگر تعریف نشده باشد، زمان فعلی به‌عنوان زمان پایان استفاده می‌شود.
trackName:نام دسته هدف سفارشی.
trackGroup:نام گروه قطعه.
color:رنگ ورودی.
با «میانای برنامه‌سازی کاربر زمان‌بندی‌ها»، داده‌هایتان را تزریق کنید
برای تزریق داده‌های سفارشی، یک شیء devtools را در ویژگی detail روش‌های performance.mark و performance.measure قرار دهید. ساختار این شیء devtools تعیین می‌کند که داده‌های شما چگونه در پانل عملکرد نمایش داده شود.
از
performance.markبرای ضبط یک رویداد فوری یا مُهر زمان در خط زمان استفاده کنید. می‌توانید شروع یا پایان عملیات خاصی را علامت‌گذاری کنید یا هر نقطه موردعلاقه‌ای را که مدت‌زمان ندارد علامت‌گذاری کنید. وقتی شیءdevtoolsرا در ویژگیdetailقرار می‌دهید، پانل عملکرد نشانگر سفارشی را در قطعه زمان‌بندی‌ها نشان می‌دهد.از
performance.measureبرای اندازه‌گیری مدت زمان یک تکلیف یا فرایند استفاده کنید. وقتی شیءdevtoolsرا در ویژگیdetailاضافه می‌کنید، پانل عملکرد ورودی‌های اندازه‌گیری سفارشی را در خط زمان در قطعه سفارشی نشان می‌دهد. اگر ازperformance.markبه‌عنوان نقطه مرجع برای ایجادperformance.measureاستفاده می‌کنید، لازم نیست شیءdevtoolsرا در تماس‌هایperformance.markاضافه کنید.
devtools شیء
این نوع‌ها ساختار شیء devtools را برای ویژگی‌های مختلف افزونه تعریف می‌کنند:
type DevToolsColor =
"primary" | "primary-light" | "primary-dark" |
"secondary" | "secondary-light" | "secondary-dark" |
"tertiary" | "tertiary-light" | "tertiary-dark" |
"error";
interface ExtensionTrackEntryPayload {
dataType?: "track-entry"; // Defaults to "track-entry"
color?: DevToolsColor; // Defaults to "primary"
track: string; // Required: Name of the custom track
trackGroup?: string; // Optional: Group for organizing tracks
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
interface ExtensionMarkerPayload {
dataType: "marker"; // Required: Identifies as a marker
color?: DevToolsColor; // Defaults to "primary"
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
مشاهده داده‌هایتان در خط زمان
برای دیدن داده‌های سفارشی در خط زمان، در پانل عملکرد، مطمئن شوید که تنظیمات روشن است: تنظیمات ضبط > نمایش قطعه‌های سفارشی.
آن را در این صفحه نمایشی امتحان کنید. ضبط عملکرد را شروع کنید، روی افزودن کورگی جدید در صفحه نسخه نمایشی کلیک کنید، سپس ضبط را متوقف کنید. در ردیابی، یک مسیر سفارشی خواهید دید که حاوی رویدادهایی با نکته‌ابزارهای سفارشی، جزئیات در زبانه خلاصه، و خلاصه‌های گروه مسیر سفارشی در خلاصه ردیابی است.
نمونه‌های کد
در اینجا چند نمونه از نحوه استفاده از میانای برنامه‌سازی کاربردی برای افزودن داده‌های خود به پانل عملکرد بااستفاده از هر سازوکار دردسترس آورده شده است.
console.timeStamp نمونه‌های API:
// Take a start timestamp
const start = performance.now();
// Measure duration from start to now
console.timeStamp("measure 1", start, undefined, "My Track", "My Group", "primary-light");
// Take an end timestamp
const end = performance.now();
// Measure duration from start to end
console.timeStamp("measure 2", start, end, "My Track", "My Group", "secondary-dark");
این کار منجر به ورودی قطعه سفارشی زیر در خط زمان عملکرد می‌شود:
مثال‌های User Timings API:
در بخش‌های بعدی، نمونه‌های کدی را ببینید که نحوه افزودن موارد زیر به خط زمان عملکرد را نشان می‌دهند:
ردیابی‌ها و ورودی‌های سفارشی
دسته‌های هدف سفارشی ایجاد کنید و آن‌ها را با ورودی‌ها پر کنید تا داده‌های عملکردتان را در دسته هدف سفارشی تجسم کنید. برای مثال:
// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
start: imageProcessinTimeStart,
detail: {
devtools: {
dataType: "track-entry",
track: "Image Processing Tasks",
trackGroup: "My Tracks", // Group related tracks together
color: "tertiary-dark",
properties: [
["Filter Type", "Gaussian Blur"],
["Resize Dimensions", "500x300"]
],
tooltipText: "Image processed successfully"
}
}
});
این کار منجر به ایجاد ورودی دسته هدف سفارشی زیر در جدول زمانی عملکرد، همراه با متن نکته‌ابزار و ویژگی‌های آن می‌شود:
نشانگرها
با نشانگرهای سفارشی که در همه قطعه‌ها گسترده شده‌اند، نقاط موردعلاقه خاص را در خط زمان به‌صورت دیداری برجسته کنید. برای مثال:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"]
],
tooltipText: "Processed image uploaded"
}
}
});
این کار منجر به نشانگر زیر در قطعه زمان‌بندی‌ها، همراه با نوشتار نکته‌ابزار و ویژگی‌های آن می‌شود:
