PerformanceResourceTiming: Eigenschaft responseEnd
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 schreibgeschützte Eigenschaft responseEnd gibt einen timestamp zurück, der den Zeitpunkt unmittelbar nach dem Empfang des letzten Bytes der Ressource durch den Browser oder unmittelbar vor dem Schließen der Transportverbindung angibt – je nachdem, was zuerst eintritt.
Wert
Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach dem Empfang des letzten Bytes der Ressource durch den Browser oder unmittelbar vor dem Schließen der Transportverbindung angibt – je nachdem, was zuerst eintritt.
Beschreibung
Die Eigenschaft responseEnd ist für Cross-Origin-Anfragen auch ohne den HTTP-Antwortheader Timing-Allow-Origin verfügbar. Eine Ausnahme bilden Navigationen von Cross-Origin-<iframe>-Elementen.
Cross-Origin-iframes
Wenn das Dokument eines Cross-Origin-<iframe> mit einem Timing-Allow-Origin-Header ausgeliefert wird, der den Origin der einbettenden Seite zulässt, gibt responseEnd den Zeitpunkt unmittelbar nach dem Empfang des letzten Bytes dieses Dokuments durch den Browser an.
Ohne diesen Header wird der genaue Zeitpunkt nicht gemeldet, da er Aufschluss darüber geben könnte, wie der Benutzer mit dem Frame interagiert hat.
Stattdessen meldet der Browser einen Ersatzeintrag, sobald das load-Ereignis des iframe ausgelöst wird.
In diesem Eintrag gibt startTime den Zeitpunkt an, zu dem die Navigation des iframe begann, und responseEnd den Zeitpunkt, zu dem das iframe einschließlich aller seiner Unterressourcen vollständig geladen war.
Die anderen Zeitstempel sowie die Eigenschaften encodedBodySize und decodedBodySize haben den Wert 0.
Beispiele
Dauer des Abrufs messen (ohne Weiterleitungen)
Mit den Eigenschaften responseEnd und fetchStart lässt sich die Gesamtdauer für den Abruf der endgültigen Ressource messen (ohne Weiterleitungen). Wenn Sie Weiterleitungen einbeziehen möchten, finden Sie die Gesamtdauer des Abrufs in der Eigenschaft duration.
const timeToFetch = entry.responseEnd - entry.fetchStart;
Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, sobald sie in der Performance-Timeline des Browsers erfasst werden. Verwenden Sie die Option buffered, um auf Einträge zuzugreifen, die vor der Erstellung des Observers erfasst wurden.
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 die resource-Performance-Einträge anzeigt, die zum Zeitpunkt des Methodenaufrufs in der Performance-Timeline des Browsers vorhanden sind:
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 |