Übersicht
Der Bereich Leistung unterstützt die API zur Leistungserweiterung, mit der Sie der Leistungszeitachse eigene benutzerdefinierte Daten hinzufügen können.
Diese API nutzt die vorhandene User Timings API und ermöglicht es Ihnen, Ihre Messwerte und Ereignisse direkt in die Leistungszeitachse als benutzerdefinierten Track oder in den Track Timings einzufügen. Dies kann für Entwickler von Frameworks, Bibliotheken und komplexen Anwendungen mit benutzerdefinierter Instrumentierung nützlich sein, um ein umfassenderes Verständnis der Leistung zu erhalten.
Wichtige Features
- Benutzerdefinierte Tracks: Sie können spezielle Tracks erstellen, um eigene zeitbasierte Daten zu visualisieren.
- Einträge: Tracks können mit Einträgen für Ereignisse oder Messungen gefüllt werden.
- Kurzinfos und Details: Stellen Sie umfangreichen Kontext für Einträge mit anpassbaren Kurzinfos und Detailansichten bereit.
- Markierungen: Sie können bestimmte Momente auf der Zeitachse mithilfe visueller Markierungen hervorheben.
Daten mit der User Timings API einschleusen
Um benutzerdefinierte Daten einzufügen, fügen Sie ein devtools
-Objekt in die Property detail
der Methoden performance.mark
und performance.measure
ein. Die Struktur dieses devtools
-Objekts bestimmt, wie Ihre Daten im Steuerfeld Leistung angezeigt werden.
Mit
performance.mark
können Sie ein sofortiges Ereignis oder einen Zeitstempel in die Zeitachse aufnehmen. Sie können den Beginn oder das Ende eines bestimmten Vorgangs oder eines beliebigen Punkts von Interesse markieren, der keine Dauer hat. Wenn Sie eindevtools
-Objekt in diedetail
-Eigenschaft aufnehmen, wird im Steuerfeld Leistung eine benutzerdefinierte Markierung auf der Zeitachse angezeigt.Verwenden Sie
performance.measure
, um die Dauer einer Aufgabe oder eines Prozesses zu messen. Wenn Sie in die Eigenschaftdetail
eindevtools
-Objekt einfügen, werden im Steuerfeld Leistung benutzerdefinierte Messeinträge auf der Zeitachse angezeigt. Wenn Sieperformance.mark
als Referenzpunkt verwenden, um einperformance.measure
zu erstellen, müssen Sie dasdevtools
-Objekt nicht inperformance.mark
-Aufrufe aufnehmen.
devtools
Objekt
Diese Typen definieren die Struktur des devtools
-Objekts für verschiedene Erweiterungsfunktionen:
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
}
Daten in der Zeitachse ansehen
Wenn Sie Ihre benutzerdefinierten Daten in der Zeitachse sehen möchten, aktivieren Sie im Bereich Leistung die
Aufnahmeeinstellungen > Erweiterungsdaten.Probieren Sie es auf dieser Demoseite aus. Aktivieren Sie Erweiterungsdaten, starten Sie eine Leistungsaufzeichnung, klicken Sie auf der Demoseite auf Neuen Corgi hinzufügen und beenden Sie die Aufzeichnung. Im Trace wird ein benutzerdefinierter Track angezeigt, der Ereignisse mit benutzerdefinierten Kurzinfos und Details auf dem Tab Zusammenfassung enthält.
Codebeispiele
In den nächsten Abschnitten finden Sie Codebeispiele, die zeigen, wie Sie der Leistungszeitachse Folgendes hinzufügen:
Benutzerdefinierte Tracks und Einträge
Erstellen Sie benutzerdefinierte Tracks und füllen Sie sie mit Einträgen, um Ihre Leistungsdaten in einem benutzerdefinierten Track zu visualisieren. Beispiel:
// 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"
}
}
});
Dies führt in der Leistungszeitachse zum folgenden benutzerdefinierten Trackeintrag mit dem zugehörigen Kurzinfotext und den Eigenschaften:
Markierungen
Mit benutzerdefinierten Markierungen, die sich über alle Tracks erstrecken, können Sie bestimmte POIs auf der Zeitachse visuell hervorheben. Beispiel:
// 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"
}
}
});
Das führt dazu, dass im Timings-Track die folgende Markierung mit dem zugehörigen Kurzinfotext und den Eigenschaften angezeigt wird: