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> |