PerformanceResourceTiming: responseEnd-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2017 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
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
| Spezifikation |
|---|
| Resource Timing # dom-performanceresourcetiming-responseend |