PerformanceResourceTiming: requestStart-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: Diese Funktion ist in Web Workers verfügbar.

Die nur-lesbare requestStart-Eigenschaft gibt einen Zeitstempel der Zeit unmittelbar bevor der Browser die Ressource vom Server, Cache oder lokalen Ressource anfordert, zurück. Wenn die Transportverbindung fehlschlägt und der Browser die Anforderung erneut tätigt, wird der Wert des Beginns der erneuten Anforderung zurückgegeben.

Es gibt keine end-Eigenschaft für requestStart. Um die Anforderungszeit zu messen, berechnen Sie responseStart - requestStart (siehe das Beispiel unten).

Wert

Die requestStart-Eigenschaft kann die folgenden Werte haben:

  • Ein DOMHighResTimeStamp, der die Zeit unmittelbar bevor der Browser die Ressource vom Server anfordert, repräsentiert.
  • 0, wenn die Ressource sofort aus einem Cache abgerufen wurde.
  • 0, wenn die Ressource eine Cross-Origin-Anforderung ist und kein Timing-Allow-Origin HTTP-Antwortheader verwendet wird.

Wenn die firstInterimResponseStart ungleich null ist, zeigt das an, dass sie denselben Wert wie requestStart für unterstützende Browser haben sollte.

Wenn es keine Zwischenantworten gibt, ist requestStart dasselbe wie finalResponseHeadersStart und firstInterimResponseStart ist 0.

Beispiele

Messung der Anforderungszeit

Die requestStart- und responseStart-Eigenschaften können verwendet werden, um zu messen, wie lange die Anforderung dauert.

js
const request = entry.responseStart - entry.requestStart;

Beispiel unter Verwendung eines PerformanceObserver, der bei neuen resource-Performance-Einträgen benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers zuzugreifen.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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

Beispiel unter Verwendung von Performance.getEntriesByType(), das nur resource-Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});

Cross-Origin-Zeitinformationen

Wenn der Wert der requestStart-Eigenschaft 0 ist, könnte die Ressource eine Cross-Origin-Anforderung sein. Um Cross-Origin-Zeitinformationen zu sehen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Beispielsweise, um https://developer.mozilla.org den Zugriff auf Zeitdaten zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

Spezifikationen

Specification
Resource Timing
# dom-performanceresourcetiming-requeststart

Browser-Kompatibilität

Siehe auch