Performance: Methode mark()

Syntax

mark(name)
mark(name, markOptions)

Parameter

name

Ein String, der den Namen des Markers angibt. Der Name darf nicht mit einer der Eigenschaften der veralteten Schnittstelle PerformanceTiming übereinstimmen.

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 sollen. Der Standardwert ist null. Die Metadaten müssen strukturiert klonbar sein.

devtools Optional

Einige Browser verwenden innerhalb des detail-Objekts ein strukturiertes devtools-Objekt als Teil einer Extensibility API, die diese Daten in benutzerdefinierten Spuren von Performance-Traces anzeigt. Weitere Informationen finden Sie in der Dokumentation zur Extensibility API von Chrome.

dataType

Ein String, der auf marker gesetzt sein muss. Kennzeichnet den Eintrag als Marker.

color Optional

Der Standardwert ist "primary". Der Wert muss einer der folgenden sein: "primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark" oder "error".

properties Optional

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

tooltipText Optional

Eine kurze Beschreibung für den Tooltip.

startTime Optional

Ein DOMHighResTimeStamp, der als Zeitpunkt des Markers verwendet wird. Der Standardwert ist performance.now().

Rückgabewert

Der erstellte PerformanceMark-Eintrag.

Ausnahmen

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

Beispiele

Benannte Marker erstellen

Das folgende Beispiel verwendet mark(), um benannte PerformanceMark-Einträge zu erstellen. Sie können mehrere Marker mit demselben Namen erstellen. Sie können sie auch einer Variablen zuweisen, um eine Referenz auf das erstellte PerformanceMark-Objekt zu erhalten.

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

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

Marker mit zusätzlichen Angaben erstellen

Der Performance-Marker lässt sich über das markOptions-Objekt konfigurieren. In dessen Eigenschaft detail können Sie zusätzliche Informationen beliebigen Typs angeben.

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

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

Marker mit einem anderen Startzeitpunkt erstellen

Der Standardzeitstempel der Methode mark() ist performance.now(). Mit der Option startTime in markOptions können Sie einen anderen Zeitpunkt festlegen.

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

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

DevTools Extensibility API

In Browsern, die die Extensibility API unterstützen, können Sie über den Parameter detail zusätzliche Angaben in einem devtools-Objekt bereitstellen. Diese werden in Performance-Profilen angezeigt:

// 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 Namen, die Teil der veralteten Schnittstelle PerformanceTiming sind, aus Gründen der Abwärtskompatibilität nicht verwendet werden können. 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

Siehe auch

• performance.measure()
• console.timeStamp()
• console.time()
• console.timeEnd()