User timing

User Timing ist Teil der Performance API und ermglicht es Ihnen, die Leistung von Anwendungen mithilfe von Przisionszeitstempeln zu messen, die Teil der Performance-Zeitachse des Browsers sind. Es gibt zwei Arten von Timing-Performance-Eintrgen:

PerformanceMark-Eintrge sind Markierungen, die Sie benennen und an jeder Stelle in einer Anwendung hinzufgen knnen.
PerformanceMeasure-Eintrge sind Zeitmessungen zwischen zwei Markierungen.

Was ist User Timing?

Der Browser stellt bestimmte Informationen (sogenannte Performance-Eintrge) fr die Performance-Zeitachse des Browsers bereit. Dazu gehren beispielsweise Eintrge, die von der Resource Timing API bereitgestellt werden und die Zeit ermitteln, die bentigt 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 Schaltflche klickt oder eine bestimmte Aufgabe innerhalb Ihrer Anwendung ausfhrt, 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 fr Ihre Anwendung sind.

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

Leistungsmarkierungen hinzufgen

Als ersten Schritt zur Messung der Leistung der Funktionen Ihrer Anwendung mssen Sie benannte Leistungsmarkierungen an wichtigen Stellen in Ihrem Code hinzufgen. Ideal ist es, wenn Sie Ihren Code durchsuchen und kritische Pfade und wichtige Aufgaben ermitteln, fr die Sie sicherstellen mchten, dass sie schnell durchgefhrt werden knnen.

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 zustzliche Informationen in der detail-Eigenschaft bereitstellen knnen, die beliebigen Typs sein kann. Sie knnen auch bei Bedarf eine andere startTime festlegen. Im folgenden Code wird die startTime auf 12.5 gesetzt, und zustzliche Informationen, wie das verwendete HTML-Element, werden mit detail bereitgestellt.

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

Dauer zwischen Markierungen messen

Jetzt, da Sie Markierungen zu Ihrer Anwendung hinzugefgt haben, knnen 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 fr Sie berechnet. Zum Beispiel knnen 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 zustzliche Informationen mit der detail-Eigenschaft bereitstellen knnen.

Beispielsweise knnen 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 Benutzeroberflche 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,
    });
  });
});

Beobachtung von Leistungsmanahmen

Der bevorzugte Weg, um ber Ihre benutzerdefinierten Leistungsmanahmen benachrichtigt zu werden, ist die Verwendung von PerformanceObserver-Objekten. Leistungsbeobachter ermglichen 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.

Abrufen von Markierungen und Messungen

Es gibt viele verschiedene Performance-Eintrge in der Performance-Zeitachse des Browsers. Einige werden vom Browser hinzugefgt, und einige knnten von Ihnen hinzugefgt 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.

Hinweis: Die untenstehenden Methoden benachrichtigen Sie nicht ber neue Leistungsmarkierungen; Sie erhalten nur Markierungen, die erstellt wurden, wenn Sie diese Methoden aufrufen. Siehe den Abschnitt Beobachtung von Leistungsmanahmen oben, um Benachrichtigungen ber neue Metriken zu erhalten, sobald diese verfgbar sind, mithilfe eines PerformanceObserver. In der Regel ist die Verwendung von Leistungsbeobachtern der bevorzugte Weg, um Leistungsmarkierungen und -messungen zu erhalten.

Die Methode performance.getEntries() holt alle Performance-Eintrge. Sie knnen 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 Eintrge 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) ermglicht 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}`);
});

Entfernen von Markierungen und Messungen

Um alle Performance-Markierungen oder -Messungen zu bereinigen, oder nur spezifische Eintrge, stehen die folgenden Methoden zur Verfgung:

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

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden