PerformanceResourceTiming.requestStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.requestStart

Beschreibung

Die schreibgeschützte Eigenschaft requestStart einer PerformanceResourceTiming-Instanz gibt einen hochauflösenden Zeitstempel in Millisekunden zurück, relativ zu performance.timeOrigin. Er markiert den Moment, in dem der Browser anfängt, die HTTP-Anfrage zu senden, also nach DNS-Auflösung, TCP-Verbindungsaufbau und TLS-Handshake.

In Kombination mit responseStart lässt sich daraus die Wartezeit auf das erste Byte berechnen (responseStart - requestStart). Das ist die Zeit, die der Server zum Verarbeiten der Anfrage braucht, einschließlich der Netzwerklatenz für eine Hin- und Rückfahrt. Der Wert ist deshalb besonders nützlich, um langsame Backend-Endpunkte, CDN-Probleme oder überlastete Server zu finden.

Wenn die Verbindung neu aufgebaut werden muss, gibt es für den Zeitpunkt, an dem der Browser die Anfrage abschickt, keine eigene Endmarke. Laut Spezifikation wird die Anfrage direkt nach connectEnd gesendet. Bei wiederverwendeten Verbindungen (Keep-Alive, HTTP/2) sind connectStart/connectEnd gleich fetchStart, und requestStart folgt kurz danach.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitstempel in Millisekunden relativ zu performance.timeOrigin, unmittelbar vor dem Senden der Anfrage. 0, wenn es sich um eine Cross-Origin-Ressource ohne Timing-Allow-Origin-Header handelt.

Beispiele

Wartezeit bis zum ersten Byte (TTFB) aller geladenen Ressourcen

const entries = performance.getEntriesByType('resource');

for (const entry of entries) {
  // requestStart ist 0 bei Cross-Origin ohne Timing-Allow-Origin
  if (entry.requestStart > 0) {
    const ttfb = entry.responseStart - entry.requestStart;
    console.log(`${entry.name}: ${ttfb.toFixed(1)} ms bis zum ersten Byte`);
  }
}

https://example.com/app.js: 42.3 ms bis zum ersten Byte https://example.com/style.css: 18.7 ms bis zum ersten Byte

Neue Ressourcen live mit PerformanceObserver überwachen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const wartezeit = entry.responseStart - entry.requestStart;
    if (entry.requestStart > 0 && wartezeit > 500) {
      console.warn(`Langsamer Server: ${entry.name} (${Math.round(wartezeit)} ms)`);
    }
  }
});

// buffered: true liefert auch bereits vorhandene Einträge
observer.observe({ type: 'resource', buffered: true });

Langsamer Server: https://api.example.com/daten (812 ms)

Aufschlüsselung eines fetch()-Aufrufs

const url = '/api/benutzer';
await fetch(url);

const [entry] = performance.getEntriesByName(new URL(url, location.href).href);

if (entry) {
  console.table({
    'Verbindung (ms)': entry.connectEnd - entry.connectStart,
    'Vor Anfrage (ms)': entry.requestStart - entry.startTime,
    'Server-Wartezeit (ms)': entry.responseStart - entry.requestStart,
    'Download (ms)': entry.responseEnd - entry.responseStart
  });
}

Tabelle mit den Phasen des Ladevorgangs

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Origins ist requestStart 0, wenn der Server keinen passenden Timing-Allow-Origin-Header sendet (z. B. Timing-Allow-Origin: *). Prüfe den Wert vor Berechnungen immer auf 0, sonst kommen negative oder sinnlose Differenzen heraus.
Cache: Wird die Ressource direkt aus dem HTTP-Cache geliefert, liegt requestStart sehr nah an fetchStart, und die Differenz zu responseStart ist fast null. Mit transferSize === 0 lassen sich solche Cache-Treffer erkennen.
Wiederholte Anfragen: Bei Weiterleitungen oder Verbindungswiederholungen bezieht sich der Wert auf die letzte, tatsächlich gesendete Anfrage.
Puffergröße: Der Resource-Timing-Puffer ist begrenzt (oft 250 Einträge). Mit performance.setResourceTimingBufferSize() lässt er sich vergrößern, oder du nutzt einen PerformanceObserver.
Genauigkeit: Aus Datenschutzgründen (Spectre-Schutz) runden Browser Zeitstempel ab. Ohne Cross-Origin-Isolation ist die Auflösung gröber.
Kein finalResponseHeadersStart o. Ä. nötig: requestStart wird in allen modernen Browsern unterstützt, auch in Web Workern.

Siehe auch

PerformanceResourceTiming PerformanceResourceTiming.responseStart PerformanceResourceTiming.connectEnd PerformanceResourceTiming.fetchStart PerformanceElementTiming.renderTime PerformanceResourceTiming.connectStart