PerformanceObserver
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
* Some parts of this feature may have varying levels of support.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das PerformanceObserver-Interface wird verwendet, um Leistungsmessevorgänge zu beobachten und über neue Performance-Einträge benachrichtigt zu werden, sobald diese in der Performance-Zeitleiste des Browsers aufgezeichnet werden.
Konstruktor
PerformanceObserver()-
Erstellt und gibt ein neues
PerformanceObserver-Objekt zurück.
Statische Eigenschaften
PerformanceObserver.supportedEntryTypesSchreibgeschützt-
Gibt ein Array der vom Benutzeragenten unterstützten
entryType-Werte zurück.
Instanzmethoden
PerformanceObserver.observe()-
Gibt die zu beobachtenden Eintragstypen an. Die Callback-Funktion des Leistungsbeobachters wird aufgerufen, wenn ein Leistungs-Eintrag für einen der angegebenen
entryTypesaufgezeichnet wird. PerformanceObserver.disconnect()-
Beendet die Leistung des Beobachters, um Leistungs-Einträge zu empfangen.
PerformanceObserver.takeRecords()-
Gibt die aktuelle Liste der im Leistungsbeobachter gespeicherten Leistungs-Einträge zurück und leert diese.
Beispiele
Erstellung eines PerformanceObserver
Das folgende Beispiel erstellt einen PerformanceObserver, der auf "mark" (PerformanceMark) und "measure" (PerformanceMeasure) Ereignisse achtet. Der Callback perfObserver liefert eine list (PerformanceObserverEntryList), die Ihnen ermöglicht, beobachtete Leistungs-Einträge abzurufen.
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"] });
Spezifikationen
| Specification |
|---|
| Performance Timeline # dom-performanceobserver |
Browser-Kompatibilität
Loading…