Entdecken Sie die Benutzer -Timing -API - SitePoint

Benutzer -Timing -API: Präzise Messung der Web -App -Leistung

Dieser Artikel befasst sich mit der Benutzer -Timing -API, einem leistungsstarken Tool für Webentwickler, um die Anwendungsleistung sorgfältig zu bewerten. Es bietet hochpräzise Zeitstempel und ermöglicht eine genaue Messung und Berichterstattung über die Ausführung von JavaScript-Code, insbesondere für das Benchmarking.

Die API -Zentren zentrieren sich um zwei Schlüsselkonzepte: markiert und misst . Eine Marke bezeichnet einen bestimmten Zeitpunkt, während eine Maßnahme die Dauer zwischen zwei Punkten berechnet. Vier Methoden sind verfügbar: mark(name), clearMarks([name]), measure(name[, mark1[, mark2]]) und clearMeasures([name]).

Browserkompatibilität ist im Allgemeinen gut, mit Unterstützung in den wichtigsten Desktop- und mobilen Browsern (einschließlich Internet Explorer 10, Chrome 25 und Opera 15). Eine Polyfill, usertiming.js ist für nicht unterstützte Browser erhältlich.

Die API zeichnet sich bei der Messung asynchroner Operationen aus. Durch die Platzierung von Markierungen am Start und Ende des Vorgangs erhalten Entwickler genaue Timing -Daten, identifizieren Sie Leistungs Engpässe und Bereiche zur Optimierung, wodurch letztendlich die Anwendungsgeschwindigkeit und Benutzererfahrung verbessert werden.

Verständnis von Markierungen und Maßnahmen

Die Benutzer -Timing -API nutzt die Schnittstellen PerformanceMark und PerformanceMeasure (beide erweitern PerformanceEntry). Eine Marke speichert einen Zeitstempel, während ein Maß das Intervall zwischen zwei Punkten berechnet. Jeder Eintrag enthält:

• name: Eine beschreibende Kennung.
• entryType: Zeigt "marke" oder "messen" an.
• startTime: Der Zeitstempel (für Markierungen) oder der Zeitstempel des Startmarks (für Maßnahmen).
• duration: 0 für Markierungen; die verstrichene Zeit für Maßnahmen.

API -Methoden und Datenabruf

Die API enthält vier Methoden innerhalb des window.performance -Objekts:

• mark(name): Erstellt einen Zeitstempel mit dem angegebenen Namen.
• clearMarks([name]): Entfernt Markierungen (alle oder eine bestimmte).
• measure(name[, mark1[, mark2]]): misst die Zeit zwischen zwei Markierungen.
• clearMeasures([name]): Entfernt Maßnahmen (alle oder eine bestimmte).

Hinweis: Namen sind keine eindeutigen IDs; Wenn Sie denselben Namen mehrmals verwenden, führt dies zu einer Reihe von Einträgen, die nach startTime sortiert sind.

, um auf gespeicherte Daten zuzugreifen, verwenden Sie getEntriesByType(type) (für Markierungen oder Maßnahmen) und getEntriesByName(name), beide zurückgegebene Sortierarrays.

Beispiel: Messfunktion Ausführungszeit

performance.mark("startFoo");
foo(); // Time-consuming function
performance.mark("endFoo");
performance.measure("durationFoo", "startFoo", "endFoo");
performance.clearMarks();
performance.clearMeasure("durationFoo");

Browserunterstützung und Polyfills

Die Benutzer -Timing -API genießt weit verbreitete Unterstützung. usertiming.js bietet jedoch eine Polyfill für Browser ohne native Unterstützung, die nur die hochauflösende Zeit -API -Methode von API erfordert. performance.now()

Demo und Schlussfolgerung

Eine Demo (Link für die Kürze weggelassen) zeigt die Funktionalität der API, einschließlich der Fehlerbehandlung für nicht unterstützte Browser und Anzeige gemessener Daten.

Die Benutzer -Timing -API ist ein wertvolles Instrument für eine präzise Leistungsmessung, die eine detaillierte Kontrolle bietet und die Ermittlung von Leistungs Engpässen für eine reibungslosere Benutzererfahrung unterstützt. Der breite Browserunterstützung und die verfügbare Polyfill sorgen für eine Vielzahl von Plattformen.

häufig gestellte Fragen (FAQs)

Der FAQS -Abschnitt bleibt weitgehend unverändert und bietet präzise Antworten auf gemeinsame Fragen zur Funktionalität, Verwendung und Einschränkungen der Benutzer -Timing -API.

Das obige ist der detaillierte Inhalt vonEntdecken Sie die Benutzer -Timing -API - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!