PerformanceResourceTiming: connectEnd-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte Eigenschaft connectEnd gibt den Zeitstempel unmittelbar nach dem Abschluss der Verbindungserstellung durch den Browser mit dem Server, um die Ressource abzurufen, zurück. Der Zeitstempelwert umfasst das Zeitintervall zum Aufbau der Transportverbindung sowie andere Zeitintervalle wie TLS-Handshake und SOCKS-Authentifizierung.

Wert

Die connectEnd-Eigenschaft kann die folgenden Werte haben:

  • Ein DOMHighResTimeStamp, der die Zeit nach dem Aufbau einer Verbindung darstellt.
  • 0, wenn die Ressource sofort aus einem Cache abgerufen wurde.
  • 0, wenn die Ressource eine Cross-Origin-Anfrage ist und kein Timing-Allow-Origin HTTP-Antwort-Header verwendet wird.

Beispiele

Messung der TCP-Handshake-Zeit

Die Eigenschaften connectEnd und connectStart können verwendet werden, um die Dauer des TCP-Handshakes zu messen.

js
const tcp = entry.connectEnd - entry.connectStart;

Beispiel mit einem PerformanceObserver, der neue resource-Performance-Einträge meldet, sobald sie in der Performance-Zeitachse des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge vor der Erstellung des Observers zuzugreifen.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

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

Beispiel mit Performance.getEntriesByType(), die nur resource-Performance-Einträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitachse des Browsers vorhanden sind:

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});

Cross-Origin-Zeitinformationen

Wenn der Wert der connectEnd-Eigenschaft 0 ist, könnte es sich um eine Cross-Origin-Anfrage handeln. Um Cross-Origin-Zeitinformationen sichtbar zu machen, muss der HTTP-Antwort-Header Timing-Allow-Origin gesetzt werden.

Zum Beispiel sollte die Cross-Origin-Ressource Folgendes senden, um https://developer.mozilla.org das Einsehen von Timing-Ressourcen zu erlauben:

http
Timing-Allow-Origin: https://developer.mozilla.org

Spezifikationen

Specification
Resource Timing
# dom-performanceresourcetiming-connectend

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch