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 keinTiming-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.
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.
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:
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:
Timing-Allow-Origin: https://developer.mozilla.org
Spezifikationen
Specification |
---|
Resource Timing # dom-performanceresourcetiming-connectend |
Browser-Kompatibilität
BCD tables only load in the browser