PerformanceResourceTiming.connectStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.connectStart

Beschreibung

Die Eigenschaft connectStart eines PerformanceResourceTiming-Eintrags liefert den Zeitpunkt in Millisekunden relativ zu performance.timeOrigin, an dem der Browser mit dem Aufbau der Transportverbindung (TCP bzw. QUIC) zum Server beginnt. Sie liegt in der Zeitleiste nach domainLookupEnd und vor secureConnectionStart bzw. connectEnd.

Zusammen mit connectEnd berechnet man die Verbindungsdauer (connectEnd - connectStart). Diese umfasst den TCP-Handshake und, bei HTTPS, auch den TLS-Handshake. Ziehen Sie secureConnectionStart ab, erhalten Sie die reine TCP-Zeit. So finden Sie langsame Server, fehlende Keep-Alive-Verbindungen oder Stellen, an denen <link rel="preconnect"> hilft.

Wird eine bestehende Verbindung wiederverwendet (Keep-Alive, HTTP/2-Multiplexing) oder kommt die Ressource aus dem Cache, sind connectStart und connectEnd gleich domainLookupEnd. Die Verbindungsdauer ist dann 0.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitstempel in Millisekunden (mit Nachkommastellen) relativ zu performance.timeOrigin. Der Wert ist 0, wenn die Ressource von einer fremden Quelle (Cross-Origin) ohne Timing-Allow-Origin-Header stammt.

Beispiele

Verbindungsdauer aller geladenen Ressourcen

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

for (const entry of entries) {
  const connectTime = entry.connectEnd - entry.connectStart;
  if (connectTime > 0) {
    console.log(`${entry.name}: ${connectTime.toFixed(1)} ms Verbindungsaufbau`);
  }
}

https://cdn.example.com/app.js: 42.3 ms Verbindungsaufbau

TCP- und TLS-Anteil getrennt messen

const analyse = (entry) => {
  const { connectStart, connectEnd, secureConnectionStart } = entry;
  const tls = secureConnectionStart > 0 ? connectEnd - secureConnectionStart : 0;
  const tcp = (secureConnectionStart > 0 ? secureConnectionStart : connectEnd) - connectStart;
  return { name: entry.name, tcp: Math.round(tcp), tls: Math.round(tls) };
};

performance.getEntriesByType('resource')
  .filter((e) => e.connectStart > 0)
  .map(analyse)
  .forEach((r) => console.table(r));

{ name: 'https://api.example.com/data', tcp: 18, tls: 25 }

Neue Ressourcen laufend mit PerformanceObserver überwachen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const reused = entry.connectStart === entry.domainLookupEnd &&
                   entry.connectEnd === entry.connectStart;
    console.log(entry.name, reused ? 'Verbindung wiederverwendet/gecacht' : `neue Verbindung ab ${entry.connectStart.toFixed(1)} ms`);
  }
});

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

// Test: Ressource nachladen
fetch('/api/status');

https://example.com/api/status Verbindung wiederverwendet/gecacht

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Quellen ist connectStart 0, solange der Server keinen passenden Timing-Allow-Origin-Header sendet. Prüfen Sie deshalb auf > 0, bevor Sie Differenzen berechnen, sonst entstehen unsinnige negative Werte oder Nullwerte.
Wiederverwendete Verbindungen: Bei Keep-Alive, HTTP/2, HTTP/3 oder Cache-Treffern gilt connectStart === connectEnd. Eine Dauer von 0 ist also kein Messfehler.
Timing-Puffer: Der Puffer für Ressourceneinträge ist begrenzt (standardmäßig meist 250 Einträge). Vergrößern Sie ihn bei Bedarf mit performance.setResourceTimingBufferSize() oder nutzen Sie einen PerformanceObserver.
Genauigkeit: Browser runden die Zeitstempel aus Sicherheitsgründen (Spectre) auf wenige Mikro- bis Millisekunden. Ohne Cross-Origin-Isolation ist die Auflösung gröber.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workern. Ab Node.js 18 steht es über perf_hooks für fetch zur Verfügung.

Siehe auch

PerformanceResourceTiming.connectEnd PerformanceResourceTiming.secureConnectionStart PerformanceResourceTiming.domainLookupEnd PerformanceResourceTiming PerformanceObserver Performance.getEntriesByType() PerformanceNavigationTiming.unloadEventStart