نظرة عامة
تتوافق لوحة الأداء مع واجهة برمجة التطبيقات لتوسيع نطاق الأداء التي تتيح لك إضافة بياناتك المخصّصة إلى المخطط الزمني للأداء.
تستفيد واجهة برمجة التطبيقات هذه من 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 an image processing task
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "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"
}
}
});
يؤدي ذلك إلى ظهور العلامة التالية في مقطع المواقيت، بالإضافة إلى نص التلميح وخصائصه:
