نظرة عامة
تتوافق لوحة الأداء مع واجهة برمجة التطبيقات لتوسيع نطاق الأداء التي تتيح لك إضافة بياناتك المخصّصة إلى المخطط الزمني للأداء.
تستفيد واجهة برمجة التطبيقات هذه من User Timings API الحالية، وتتيح لك إدخال القياسات والأحداث مباشرةً في المخطط الزمني للأداء كمسار مخصّص أو في مسار التوقيتات. قد يكون ذلك مفيدًا لمطوّري الإطارات والكتب والمكتبات والتطبيقات المعقدة التي تتضمّن أدوات قياس مخصّصة للحصول على فهم أكثر شمولية للأداء.
الميزات الرئيسية
- المسارات المخصّصة: يمكنك إنشاء مسارات مخصّصة لعرض بياناتك المستندة إلى الوقت.
- الإدخالات: لملء المسارات باستخدام إدخالات تمثّل الأحداث أو القياسات.
- التلميحات والتفاصيل: يمكنك تقديم سياق غني للإدخالات باستخدام تلميحات قابلة للتخصيص وعروض تفصيلية.
- العلامات: يمكنك تمييز لحظات معيّنة في المخطط الزمني باستخدام علامات مرئية.
إدخال بياناتك باستخدام واجهة برمجة تطبيقات توقيتات المستخدم
لإدخال بيانات مخصّصة، أدرِج عنصر 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
}
عرض بياناتك في المخطط الزمني
للاطّلاع على بياناتك المخصّصة في المخطط الزمني، في لوحة الأداء، فعِّل إعدادات الالتقاط > بيانات الإضافة.
يمكنك تجربته في هذه الصفحة التجريبية. فعِّل بيانات الإضافات، وابدأ تسجيلًا للأداء، وانقر على إضافة كلب كورغي جديد في صفحة العرض التجريبي، ثم أوقِف التسجيل. سيظهر لك مسار مخصّص في التتبّع يحتوي على أحداث تتضمّن نصائح توضيحية مخصّصة وتفاصيل في علامة التبويب الملخّص.
أمثلة على الرموز البرمجية
في الأقسام التالية، يمكنك الاطّلاع على أمثلة على الرموز البرمجية التي توضّح كيفية إضافة ما يلي إلى المخطط الزمني للأداء:
الأغاني والإدخالات المخصّصة
أنشئ مسارات مخصّصة واملأها بإدخالات لعرض بيانات الأداء في مسار مخصّص. على سبيل المثال:
// 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"
}
}
});
يؤدي ذلك إلى ظهور العلامة التالية في مقطع المواقيت، بالإضافة إلى نص التلميح وخصائصه:
