PerformanceResourceTiming: requestStart Eigenschaft

Die requestStart Eigenschaft kann die folgenden Werte haben:

• Ein DOMHighResTimeStamp, der die Zeit direkt bevor der Browser beginnt, die Ressource vom Server anzufordern, 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-Response-Header verwendet wird.

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

const request = entry.responseStart - entry.requestStart;

Beispiel mit einem PerformanceObserver, der über neue resource Leistungseinträge informiert, die in der Leistungszeitachse des Browsers aufgezeichnet werden. Verwenden Sie die buffered Option, um auf Einträge vor der Erstellung des Beobachters 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 mit Performance.getEntriesByType(), das nur resource Leistungseinträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Leistungszeitachse 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-Timing-Informationen sichtbar zu machen, muss der Timing-Allow-Origin HTTP-Response-Header gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org das Ansehen von Timing-Ressourcen zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

• Timing-Allow-Origin