PerformanceResourceTiming: responseEnd-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die responseEnd
schreibgeschützte Eigenschaft gibt einen timestamp
direkt nach dem Empfang des letzten Bytes der Ressource durch den Browser zurück oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.
Im Gegensatz zu vielen anderen PerformanceResourceTiming
-Eigenschaften ist die responseEnd
-Eigenschaft für Cross-Origin-Anfragen verfügbar, ohne dass der Timing-Allow-Origin
HTTP-Antwort-Header benötigt wird.
Wert
Ein DOMHighResTimeStamp
direkt nach dem Empfang des letzten Bytes der Ressource durch den Browser oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.
Beispiele
Messung der Zeit zum Abrufen (ohne Umleitungen)
Die Eigenschaften responseEnd
und fetchStart
können verwendet werden, um die Gesamtzeit zu messen, die zum Abrufen der endgültigen Ressource benötigt wurde (ohne Umleitungen). Wenn Sie Umleitungen einbeziehen möchten, wird die Gesamtzeit zum Abrufen in der duration
-Eigenschaft bereitgestellt.
const timeToFetch = entry.responseEnd - entry.fetchStart;
Beispiel mit einem PerformanceObserver
, der über neue resource
-Performance-Einträge informiert, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered
, um auf Einträge vor der Erstellung des Observers zuzugreifen.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Beispiel mit Performance.getEntriesByType()
, das nur resource
-Performance-Einträge zeigt, die in der Performance-Zeitleiste des Browsers vorhanden sind, wenn Sie diese Methode aufrufen:
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
Spezifikationen
Specification |
---|
Resource Timing # dom-performanceresourcetiming-responseend |
Browser-Kompatibilität
BCD tables only load in the browser