Performance: mark() Methode

Syntax

mark(name)
mark(name, markOptions)

Parameter

name

Ein String, der den Namen des Markers darstellt. Darf nicht denselben Namen wie eine der Eigenschaften der veralteten PerformanceTiming-Schnittstelle haben.

markOptions Optional

Ein Objekt zur Angabe eines Zeitstempels und zusätzlicher Metadaten für den Marker.

detail Optional

Beliebige Metadaten, die in den Marker aufgenommen werden. Standardmäßig null. Muss structured-cloneable sein.

devtools Optional Experimentell

Einige Browser verwenden ein strukturiertes devtools-Objekt innerhalb des detail-Objekts als Teil einer Extensibility API, um diese in benutzerdefinierten Spuren in Leistungsprofilen anzuzeigen. Weitere Informationen finden Sie in der Chrome's Extensibility API Dokumentation.

dataType Experimentell

Ein String, der auf marker gesetzt werden muss. Identifiziert als ein Marker.

color Optional Experimentell

Standard ist "primary". Muss einer von "primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark", "error" sein.

properties Optional Experimentell

Array von Schlüssel-Wert-Paaren. Werte können jeden JSON-kompatiblen Typ haben.

tooltipText Optional Experimentell

Kurzbeschreibung für Tooltip.

startTime Optional

DOMHighResTimeStamp, der als Markierungszeit verwendet werden soll. Standardmäßig performance.now().

Rückgabewert

Der erstellte PerformanceMark-Eintrag.

Ausnahmen

• SyntaxError: Wird ausgelöst, wenn der name einer der Eigenschaften der veralteten PerformanceTiming-Schnittstelle ist. Siehe das Beispiel unten.
• TypeError: Wird ausgelöst, wenn startTime negativ ist.

Beispiele

Erstellen benannter Marker

Im folgenden Beispiel wird mark() verwendet, um benannte PerformanceMark-Einträge zu erstellen. Sie können mehrere Marker mit demselben Namen erstellen. Sie können sie auch zuweisen, um eine Referenz auf das erstellte PerformanceMark-Objekt zu haben.

performance.mark("login-started");
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");

const videoMarker = performance.mark("video-loaded");

Erstellen von Markern mit Details

Der Leistungsmarker ist konfigurierbar über das markOptions-Objekt, in dem Sie zusätzliche Informationen in der detail-Eigenschaft angeben können, die von jedem Typ sein kann.

performance.mark("login-started", {
  detail: "Login started using the login button in the top menu.",
});

performance.mark("login-started", {
  detail: { htmlElement: myElement.id },
});

Erstellen von Markern mit einer anderen Startzeit

Der Standard-Zeitstempel der mark()-Methode ist performance.now(). Sie können ihn mit der startTime-Option in markOptions auf eine andere Zeit setzen.

performance.mark("start-checkout", {
  startTime: 20.0,
});

performance.mark("login-button-pressed", {
  startTime: myEvent.timeStamp,
});

Extensibility API von DevTools

Für Browser, die die Extensibility API unterstützen, können Sie den detail-Parameter verwenden, um mehr Details in einem devtools-Objekt anzugeben, das verwendet wird, um dies in Leistungsprofilen anzuzeigen:

// 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",
    },
  },
});

Reservierte Namen

Beachten Sie, dass zur Aufrechterhaltung der Rückwärtskompatibilität keine Namen verwendet werden können, die Teil der veralteten PerformanceTiming-Schnittstelle sind. Das folgende Beispiel löst eine Ausnahme aus:

performance.mark("navigationStart");
// SyntaxError: "navigationStart" is part of
// the PerformanceTiming interface,
// and cannot be used as a mark name

Spezifikationen

Browser-Kompatibilität