User timing

Der Browser stellt bestimmte Informationen (sogenannte Performance-Einträge) für die Performance-Zeitachse des Browsers bereit. Dazu gehören beispielsweise Einträge, die von der Resource Timing API bereitgestellt werden und die Zeit ermitteln, die benötigt wird, um eine Ressource wie ein Bild abzurufen.

Der Browser kann jedoch nicht feststellen, was in Ihrer Anwendung passiert. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt oder eine bestimmte Aufgabe innerhalb Ihrer Anwendung ausführt, gibt es keine genaue Leistungsbewertung. Die User Timing API ist eine Erweiterung der Performance-Zeitachse des Browsers und hilft Ihnen dabei, Leistungsdaten zu messen und aufzuzeichnen, die speziell für Ihre Anwendung sind.

Der Vorteil der Verwendung dieser API gegenüber Aufrufen von Date.now() oder performance.now() besteht darin, dass Sie den Markierungen einen Namen geben können und sie sich gut in Leistungstools integrieren lässt. Entwicklerwerkzeuge des Browsers können Leistungsmarkierungen in Leistungs-Panels anzeigen, und sie funktioniert auch mit anderen Leistungs-APIs wie PerformanceObserver-Objekten.

Als ersten Schritt zur Messung der Leistung der Funktionen Ihrer Anwendung müssen Sie benannte Leistungsmarkierungen an wichtigen Stellen in Ihrem Code hinzufügen. Ideal ist es, wenn Sie Ihren Code durchsuchen und kritische Pfade und wichtige Aufgaben ermitteln, für die Sie sicherstellen möchten, dass sie schnell durchgeführt werden können.

Die Methode performance.mark() wird verwendet, um ein PerformanceMark zu erstellen. Die Methode nimmt ein Argument, den name der Markierung, wie im folgenden Beispiel gezeigt.

// Place at a location in the code that starts login
performance.mark("login-started");

// Place at a location in the code that finishes login
performance.mark("login-finished");

Wenn das name-Argument nicht ausreicht, ist mark() mit einem Optionen-Objekt konfigurierbar, in dem Sie zusätzliche Informationen in der detail-Eigenschaft bereitstellen können, die beliebigen Typs sein kann. Sie können auch bei Bedarf eine andere startTime festlegen. Im folgenden Code wird die startTime auf 12.5 gesetzt, und zusätzliche Informationen, wie das verwendete HTML-Element, werden mit detail bereitgestellt.

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

Jetzt, da Sie Markierungen zu Ihrer Anwendung hinzugefügt haben, können Sie die Zeit dazwischen messen.

Die Methode Performance.measure() wird verwendet, um ein PerformanceMeasure-Objekt zu erstellen. Sie akzeptiert einen name-Parameter, der zur Identifizierung der Messung verwendet wird, und zwei Markierungen, start und end, zwischen denen gemessen werden soll. Das folgende Beispiel erstellt eine "login-duration"-Messung und misst zwischen dem Start und dem Ende des Anmeldevorgangs.

Das Objekt hat dann eine duration-Eigenschaft, die den End- und Startzeitstempel für Sie berechnet. Zum Beispiel können Sie diesen Wert protokollieren oder an ein Analyse-Endpunkt senden.

const loginMeasure = performance.measure(
  "login-duration",
  "login-started",
  "login-finished",
);

console.log(loginMeasure.duration);

Die Methode Performance.measure() ist auch mit einem Optionen-Objekt konfigurierbar, sodass Sie fortgeschrittenere Messungen vornehmen oder zusätzliche Informationen mit der detail-Eigenschaft bereitstellen können.

Beispielsweise können Sie die event.timestamp-Eigenschaft von einem click event verwenden, um genau zu wissen, wann ein Benutzer auf Login geklickt hat, und dies bis zu dem Zeitpunkt messen, zu dem die Benutzeroberfläche aktualisiert wurde, was hier die "login-finished"-Markierung ist.

loginButton.addEventListener("click", (clickEvent) => {
  fetch(loginURL).then((data) => {
    renderLoggedInUser(data);

    const marker = performance.mark("login-finished");

    performance.measure("login-click", {
      detail: { htmlElement: myElement.id },
      start: clickEvent.timeStamp,
      end: marker.startTime,
    });
  });
});

Der bevorzugte Weg, um über Ihre benutzerdefinierten Leistungsmaßnahmen benachrichtigt zu werden, ist die Verwendung von PerformanceObserver-Objekten. Leistungsbeobachter ermöglichen es Ihnen, sich passiv auf Leistungsmarkierungen und -messungen zu abonnieren, sobald sie auftreten.

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

Weitere Informationen finden Sie unter PerformanceObserver.

Es gibt viele verschiedene Performance-Einträge in der Performance-Zeitachse des Browsers. Einige werden vom Browser hinzugefügt, und einige könnten von Ihnen hinzugefügt worden sein, wie die Login-Markierungen und -Messungen aus den obigen Beispielen.

Um Leistungsmarkierungen und -messungen zu einem bestimmten Zeitpunkt abzurufen, bietet die Schnittstelle Performance drei Methoden, wie unten gezeigt.

Die Methode performance.getEntries() holt alle Performance-Einträge. Sie können diese nach Bedarf filtern.

const entries = performance.getEntries();
entries.forEach((entry) => {
  if (entry.entryType === "mark") {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  }
  if (entry.entryType === "measure") {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

Die Methode performance.getEntriesByType(entryType) filtert die Einträge bereits nach Typ.

const marks = performance.getEntriesByType("mark");
marks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

const measures = performance.getEntriesByType("measure");
measures.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

Die Methode performance.getEntriesByName(name, entryType) ermöglicht es Ihnen, spezifische Markierungen oder Messungen nach Name abzurufen.

// Log all marks named "debug-marks"
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

Um alle Performance-Markierungen oder -Messungen zu bereinigen, oder nur spezifische Einträge, stehen die folgenden Methoden zur Verfügung:

• performance.clearMarks()
• performance.clearMeasures()

// Clear all marks
performance.clearMarks();

// Removes the marker with the name "myMarker"
performance.clearMarks("myMarker");

// Clear all measures
performance.clearMeasures();

// Removes the measure with the name "myMeasure"
performance.clearMeasures("myMeasure");

• Performance
• PerformanceMark
• PerformanceMeasure
• PerformanceEntry
• PerformanceObserver