Nutzerzeitmessungen sind zwei Leistungsfunktionen, die in den meisten modernen Browsern verfügbar sind. Sie können verwendet werden, um Daten darüber zu sammeln, wie Ihre Webseite oder App von Ihren Nutzern verwendet wird, was zur Optimierung der Webseitenleistung .
Benutzerdefinierte Zeitmarken markieren bestimmte Punkte in Ihrem Code, deren Ladezeit anschließend mit der Benutzerzeitmessung erfasst werden kann. Dies hilft, Engpässe in Ihrem Code zu identifizieren. Beispielsweise können Sie eine benutzerdefinierte Zeitmarke verwenden, um den Beginn einer JavaScript- Datei zu markieren und anschließend mit der Benutzerzeitmessung die Ladezeit dieser Datei zu ermitteln.
Benutzerzeitmessungen erfassen die Zeitspanne zwischen zwei Benutzerzeitpunkten. Dies kann helfen, die Leistung bestimmter Codeabschnitte zu messen. Beispielsweise können Sie mithilfe einer Benutzerzeitmessung ermitteln, wie lange die Ausführung einer bestimmten AJAX- Anfrage gedauert hat.
Mehr über Benutzer-Timing-Markierungen und -Messungen können Sie auf der W3C-Website .
Was sind Benutzer-Timing-Markierungen?
Diese beiden Kennzahlen, Benutzerzeitmarken und -kennzahlen, sind Leistungsmetriken, die zur Identifizierung von Problemen und zur Optimierung von Webanwendungen eingesetzt werden können. Benutzerzeitmarken messen die Zeit zwischen zwei Ereignissen oder die Zeit bis zum Abschluss eines Ereignisses. Benutzerzeitkennzahlen messen die Ereignisdauer oder die Anzahl der Ereignisse in einem bestimmten Zeitraum.
Wie füge ich benutzerdefinierte Zeitmarken hinzu?
Das Hinzufügen von Zeitmessmarken und -maßnahmen ist eine hervorragende Methode, um Einblicke in die Performance Ihrer Webseiten zu gewinnen. Mit der Zeitmessung können Sie verfolgen, wie lange bestimmte Ereignisse auf Ihren Seiten dauern, beispielsweise das Klicken eines Buttons oder Links durch einen Nutzer.
Um benutzerdefinierte Zeitmarken und -maßnahmen hinzuzufügen, müssen Sie zunächst eine neue JavaScript-Datei erstellen. Anschließend müssen Sie den folgenden Code in Ihre Datei einfügen:
var startTime = Date.now();
function doSomething() {
var endTime = Date.now();
var timeTaken = endTime – startTime;
console.log('Die Ausführung der Funktion doSomething dauerte ' + timeTaken + ' ms.');
}
Der obige Code ermöglicht es Ihnen, die Ausführungszeit der Funktion „Etwas tun“ zu messen. Sie können diese Technik auch verwenden, um andere Ereignisse auf Ihrer Seite zu verfolgen. Ersetzen Sie dazu im obigen Code den Funktionsnamen durch den Namen des Ereignisses, das Sie überwachen möchten.
Tipps zum Markieren der Zeit in Ihrem Code
1. Um die Zeit zu messen, die ein bestimmter Vorgang in Ihrem Code benötigt, können Sie die `performance.now()` . Diese liefert Ihnen einen genauen Zeitstempel bis auf eine Tausendstel Millisekunde genau.
2. Alternativ können Sie auch die Methode Date.now() verwenden, wenn Sie keine so hohe Genauigkeit benötigen.
3. Wenn Sie messen möchten, wie lange etwas in bestimmten Einheiten (z. B. Sekunden, Minuten usw.) dauert, können Sie die Methoden performance.mark() und performance.measure() verwenden.
4. Wenn Sie schließlich detaillierte Informationen darüber erhalten möchten, was in Ihrem Code passiert und wie lange die Ausführung der einzelnen Teile davon gedauert hat, können Sie die Methoden mark() und measure() der User Timing API verwenden.
Abschluss
Die User Timing API bietet Ihnen wertvolle Einblicke in die Interaktion Ihrer Nutzer mit Ihren Webanwendungen. Mithilfe von Markierungen und Messwerten können Sie spezifische Ereignisse und Zeitinformationen verfolgen und so potenzielle Engpässe oder Probleme identifizieren. Darüber hinaus lassen sich mit der User Timing API Leistungsdaten erfassen, die zur Verbesserung der gesamten Nutzererfahrung beitragen.
