داده های عملکرد خود را با توسعه API سفارشی کنید

آندرس اولیوارس
Andrés Olivares
سوفیا املیانوا
Sofia Emelianova

نمای کلی

پانل Performance از API توسعه پذیری عملکرد پشتیبانی می کند و امکان افزودن داده های سفارشی به جدول زمانی عملکرد را فراهم می کند. این به شما امکان می دهد اندازه گیری ها و رویدادهای خود را مستقیماً در جدول زمانی عملکرد به عنوان یک آهنگ سفارشی یا در مسیر Times تزریق کنید. این ممکن است برای توسعه دهندگان چارچوب ها، کتابخانه ها و برنامه های پیچیده با ابزار دقیق سفارشی مفید باشد تا درک جامع تری از عملکرد به دست آورند.

این API دو مکانیسم متمایز ارائه می دهد:

1. User Timings API (با استفاده از performance.mark و performance.measure )

این API از User Timeming API موجود استفاده می کند. همچنین ورودی هایی را به جدول زمانی عملکرد داخلی مرورگر اضافه می کند که امکان تجزیه و تحلیل بیشتر و ادغام با سایر ابزارهای عملکرد را فراهم می کند.

2. API console.timeStamp (توسعه برای DevTools)

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

ویژگی های کلیدی

هر دو API ارائه می دهند:

  • آهنگ های سفارشی: ورودی ها را به آهنگ ها و گروه های آهنگ سفارشی اضافه کنید.
  • ورودی‌ها : آهنگ‌ها را با ورودی‌هایی که رویدادها یا اندازه‌گیری‌ها را نشان می‌دهند پر کنید.
  • سفارشی سازی رنگ: ورودی های کد رنگ برای تمایز بصری.

تفاوت های کلیدی و زمان استفاده از هر API:

  • User Timings API ( performance.mark ، performance.measure ):
    • ورودی ها را هم به پانل عملکرد و هم به جدول زمانی عملکرد داخلی مرورگر اضافه می کند.
    • به داده های غنی از جمله نکات ابزار و ویژگی های دقیق اجازه می دهد.
    • امکان افزودن نشانگرها : لحظات خاصی را در خط زمانی با نشانگرهای بصری برجسته کنید.
    • مناسب برای تجزیه و تحلیل دقیق عملکرد و زمانی که ادغام با سایر ابزارهای عملکرد مورد نیاز است.
    • زمانی که نیاز به ذخیره داده های اضافی با هر ورودی دارید، و زمانی که قبلاً از User Timings API استفاده می کنید استفاده کنید.
  • console.timeStamp API:
    • ورودی ها را فقط به پانل عملکرد اضافه می کند.
    • عملکرد بسیار بالاتری را به خصوص در محیط های تولید ارائه می دهد.
    • ایده آل برای ابزار دقیق مسیرهای داغ و کدهای حیاتی عملکرد.
    • هیچ داده اضافی مانند راهنمای ابزار یا ویژگی ها را نمی توان اضافه کرد.
    • زمانی استفاده کنید که سربار عملکرد یک نگرانی اصلی است و باید به سرعت کد ابزار را وارد کنید.

داده های خود را با User Timings API تزریق کنید

برای تزریق داده های سفارشی، شیء devtools را در ویژگی detail متدهای performance.mark و performance.measure قرار دهید. ساختار این شیء devtools نحوه نمایش داده های شما در پنل Performance را تعیین می کند.

  • از performance.mark برای ثبت یک رویداد فوری یا مهر زمانی در جدول زمانی استفاده کنید. می توانید شروع یا پایان یک عملیات خاص یا هر نقطه مورد علاقه ای را که مدت زمان ندارد علامت گذاری کنید. هنگامی که یک شیء devtools را در ویژگی detail قرار می دهید، پانل عملکرد یک نشانگر سفارشی را در مسیر Timeings نشان می دهد.

  • از performance.measure برای اندازه گیری مدت زمان یک کار یا فرآیند استفاده کنید. هنگامی که یک شی devtools را در ویژگی detail قرار می‌دهید، پانل Performance ورودی‌های اندازه‌گیری سفارشی را در جدول زمانی در یک مسیر سفارشی نشان می‌دهد. اگر از 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 تزریق کنید

Consol.timeStamp API گسترش یافته است تا امکان ایجاد ورودی های زمان بندی سفارشی در پانل عملکرد با حداقل هزینه اضافی را فراهم کند.

console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);
  • label : برچسب ورودی زمان.
  • start : نام مهر زمانی ثبت شده قبلی (با استفاده از console.timeStamp(timeStampName) ). اگر تعریف نشده باشد، از زمان فعلی استفاده می شود.
  • end : نام مهر زمانی ثبت شده قبلی. اگر تعریف نشده باشد، از زمان فعلی استفاده می شود.
  • trackName : نام آهنگ سفارشی.
  • trackGroup : نام گروه آهنگ.
  • color : رنگ ورودی.

داده های خود را در جدول زمانی مشاهده کنید

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

کادر انتخاب «داده های برنامه افزودنی» در «تنظیمات ضبط» پانل عملکرد.

آن را در این صفحه نمایشی امتحان کنید. داده های برنامه افزودنی را روشن کنید، ضبط عملکرد را شروع کنید، روی Add new Corgi در صفحه نمایشی کلیک کنید، سپس ضبط را متوقف کنید. یک مسیر سفارشی را در ردیابی خواهید دید که حاوی رویدادهایی با نکات ابزار و جزئیات سفارشی در تب Summary است.

نمونه های کد

در اینجا چند نمونه از نحوه استفاده از API برای افزودن داده های خود به پنل عملکرد با استفاده از هر مکانیزم موجود آورده شده است.

مثال‌های User Timings API:

در بخش‌های بعدی، نمونه‌هایی از کدها را ببینید که نحوه افزودن موارد زیر را به جدول زمانی عملکرد نشان می‌دهد:

آهنگ ها و ورودی های سفارشی

آهنگ های سفارشی ایجاد کنید و آنها را با ورودی ها پر کنید تا داده های عملکرد خود را در یک آهنگ سفارشی تجسم کنید. به عنوان مثال:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");

// ... 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: "Image Processing Start",
  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"
    }
  }
});

این منجر به نشانگر زیر در مسیر Timeings به همراه متن راهنمای ابزار و ویژگی های آن می شود:

یک نشانگر سفارشی در مسیر تایمینگ.

نمونه‌های API console.timeStamp :

// Record a start timestamp
console.timeStamp("start");

// Measure duration from start to now
console.timeStamp("measure 1", "start", undefined, "My Track", "My Group", "primary-light");

// Record an end timestamp
console.timeStamp("end");

// Measure duration from start to end
console.timeStamp("measure 2", "start", "end", "My Track", "My Group", "secondary-dark");

این منجر به ورود آهنگ سفارشی زیر در جدول زمانی عملکرد می شود:

یک آهنگ سفارشی با ورودی های سفارشی اضافه شده با console.timeStamp API.