PerformanceResourceTiming.responseEnd — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.responseEnd

Beschreibung

Die schreibgeschützte Eigenschaft responseEnd einer PerformanceResourceTiming-Instanz gibt den Zeitpunkt an, an dem der Browser das letzte Byte der Antwort empfangen hat. Wird die Transportverbindung vorher geschlossen, gilt stattdessen der Zeitpunkt direkt vor dem Schließen. Angegeben ist der Wert in Millisekunden relativ zu performance.timeOrigin.

Zusammen mit responseStart lässt sich daraus die reine Download-Dauer (responseEnd - responseStart) berechnen. Mit startTime bzw. fetchStart ergibt sich die gesamte Ladezeit einer Ressource. Bei Ressourceneinträgen entspricht responseEnd in der Regel dem Ende des Eintrags (startTime + duration).

Typische Einsatzfälle sind Real-User-Monitoring (RUM), das Aufspüren langsamer Bilder, Skripte oder API-Aufrufe und das Prüfen, ob Ressourcen aus dem Cache kamen. Die Werte liest man über performance.getEntriesByType("resource") oder einen PerformanceObserver aus.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitstempel in Millisekunden (mit Nachkommastellen) nach dem Empfang des letzten Bytes bzw. vor dem Schließen der Verbindung. Der Wert ist nie negativ; bei fehlgeschlagenen Abrufen kann er dem Zeitpunkt des Abbruchs entsprechen.

Beispiele

Download-Dauer aller geladenen Ressourcen

const resources = performance.getEntriesByType("resource");

for (const entry of resources) {
  const download = entry.responseEnd - entry.responseStart;
  const gesamt = entry.responseEnd - entry.startTime;
  console.log(`${entry.name}: Download ${download.toFixed(1)} ms, gesamt ${gesamt.toFixed(1)} ms`);
}

https://example.com/app.js: Download 12.4 ms, gesamt 85.7 ms https://example.com/logo.png: Download 3.1 ms, gesamt 40.2 ms

Langsame Ressourcen live mit PerformanceObserver erkennen

const SCHWELLE_MS = 500;

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const ladezeit = entry.responseEnd - entry.startTime;
    if (ladezeit > SCHWELLE_MS) {
      console.warn(`Langsam (${Math.round(ladezeit)} ms): ${entry.name}`);
    }
  }
});

observer.observe({ type: "resource", buffered: true });

Langsam (812 ms): https://cdn.example.com/hero.jpg

Dauer eines fetch()-Aufrufs nachträglich auswerten

const url = "/api/produkte";
await fetch(url);

const [entry] = performance.getEntriesByName(new URL(url, location.href).href);
if (entry) {
  console.log("Letztes Byte empfangen nach:", entry.responseEnd.toFixed(1), "ms");
  console.log("Aus dem Cache?", entry.transferSize === 0 && entry.decodedBodySize > 0);
}

Letztes Byte empfangen nach: 1432.6 ms Aus dem Cache? false

// Wichtig · Fallstricke

Cross-Origin-Ressourcen: Ohne Timing-Allow-Origin-Header liefern viele Detailwerte (z. B. responseStart, requestStart) 0. responseEnd ist zwar weiter verfügbar, Differenzen wie responseEnd - responseStart werden dann aber sinnlos. Prüfe deshalb vor dem Rechnen, ob responseStart > 0 ist.
Cache-Treffer: Kommt eine Ressource aus dem HTTP-Cache, liegen responseStart und responseEnd oft sehr nah beieinander. Eine kurze Download-Dauer heißt also nicht automatisch, dass das Netzwerk schnell ist.
Puffergröße: Der Resource-Timing-Puffer fasst standardmäßig etwa 250 Einträge. Mit performance.setResourceTimingBufferSize() kannst du ihn vergrößern, oder du verwendest einen PerformanceObserver.
Genauigkeit: Zum Schutz vor Timing-Angriffen runden Browser die Zeitstempel. Firefox rundet ohne Cross-Origin-Isolation zum Beispiel auf 1 ms oder gröber.
Wird in allen modernen Browsern unterstützt, auch in Web Workers.

Siehe auch

PerformanceResourceTiming.encodedBodySize PerformanceResourceTiming.responseStart PerformanceResourceTiming.redirectEnd PerformanceResourceTiming.responseStatus PerformanceResourceTiming.connectEnd