PerformanceResourceTiming.connectEnd — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.connectEnd

Beschreibung

Die schreibgeschützte Eigenschaft connectEnd eines PerformanceResourceTiming-Eintrags gibt an, wann der Browser die Verbindung zum Server für das Laden einer Ressource fertig aufgebaut hat. Der Wert ist ein DOMHighResTimeStamp in Millisekunden, gemessen relativ zu performance.timeOrigin.

Zusammen mit connectStart lässt sich damit die Dauer des Verbindungsaufbaus berechnen (connectEnd - connectStart). Darin enthalten ist der TCP-Handshake und bei HTTPS auch der TLS-Handshake. Den TLS-Anteil allein bekommen Sie über connectEnd - secureConnectionStart. Bei HTTP/3 (QUIC) steht der Wert für den Abschluss des QUIC-Handshakes.

Wird eine bestehende Verbindung wiederverwendet (Keep-Alive, HTTP/2-Multiplexing) oder kommt die Ressource aus dem Cache, gilt connectEnd === connectStart === domainLookupEnd. Die gemessene Dauer ist dann 0. Die Eigenschaft eignet sich gut, um zu prüfen, ob preconnect-Hinweise wirken, um langsame Drittanbieter-Hosts zu finden und um Verbindungszeiten im Real User Monitoring (RUM) zu erfassen.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt in Millisekunden direkt nach dem Verbindungsaufbau. 0 bei Cross-Origin-Ressourcen ohne Timing-Allow-Origin-Header.

Beispiele

Dauer des Verbindungsaufbaus pro Ressource

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 ermitteln

const [entry] = performance.getEntriesByName('https://api.example.com/data.json');

if (entry && entry.connectEnd > 0) {
  const tls = entry.secureConnectionStart > 0
    ? entry.connectEnd - entry.secureConnectionStart
    : 0;
  const tcp = entry.connectEnd - entry.connectStart - tls;
  console.log({ tcp: Math.round(tcp), tls: Math.round(tls) });
}

{ tcp: 18, tls: 25 }

Neue Ressourcen mit PerformanceObserver überwachen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const reused = entry.connectEnd === entry.connectStart;
    console.log(entry.name, reused ? 'Verbindung wiederverwendet' : `neu: ${Math.round(entry.connectEnd - entry.connectStart)} ms`);
  }
});

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

// Später: Überwachung beenden
// observer.disconnect();

https://example.com/style.css Verbindung wiederverwendet

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Ursprüngen ist connectEnd 0, solange der Server keinen passenden Timing-Allow-Origin-Header mitsendet. Filtern Sie solche Einträge heraus, sonst erhalten Sie negative oder unsinnige Differenzen.
Wiederverwendete Verbindungen: Ist die Verbindung schon offen oder kommt die Ressource aus dem Cache, ergibt connectEnd - connectStart den Wert 0. Das ist kein Messfehler.
TLS-Anteil: connectEnd schließt den TLS-Handshake ein. Wer nur die TCP-Zeit braucht, muss secureConnectionStart berücksichtigen.
Puffergröße: Der Ressourcen-Puffer umfasst standardmäßig etwa 250 Einträge. Mit performance.setResourceTimingBufferSize() vergrößern Sie ihn, mit einem PerformanceObserver gehen Ihnen keine Einträge verloren.
Kompatibilität: Wird von allen modernen Browsern unterstützt und ist auch in Web Workern verfügbar. Ältere Safari-Versionen liefern für Cross-Origin-Ressourcen teilweise unvollständige Werte.

Siehe auch

PerformanceEventTiming.cancelable PerformanceResourceTiming.connectStart PerformanceResourceTiming.redirectEnd PerformanceResourceTiming.contentType PerformanceResourceTiming.contentEncoding