PerformanceResourceTiming: requestStart-Eigenschaft

Die requestStart-Eigenschaft kann die folgenden Werte haben:

• Ein DOMHighResTimeStamp, der die Zeit unmittelbar bevor der Browser die Ressource vom Server anfordert, darstellt.
• 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-Antwort-Header verwendet wird.

Wenn der firstInterimResponseStart ungleich null ist, zeigt dies an, dass er denselben Wert wie requestStart für unterstützte Browser haben sollte.

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

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

const request = entry.responseStart - entry.requestStart;

Beispiel unter Verwendung eines PerformanceObserver, der über neue Leistungsressourcen-Einträge benachrichtigt, sobald sie in der Leistungstimeline 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 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(), die nur resource-Leistungseinträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Leistungstimeline des Browsers vorhanden sind:

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`);
  }
});

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

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

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

• Timing-Allow-Origin