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