PerformanceResourceTiming: fetchStart-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2017 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die schreibgeschützte Eigenschaft fetchStart repräsentiert einen timestamp unmittelbar bevor der Browser beginnt, die Ressource abzurufen.
Wenn es keine HTTP-Weiterleitungen gibt oder deren Timing-Informationen nicht verfügbar gemacht werden, entspricht dieser Wert PerformanceEntry.startTime. Andernfalls kann dieser Wert später als startTime liegen.
Im Gegensatz zu vielen anderen PerformanceResourceTiming-Eigenschaften ist die Eigenschaft fetchStart für Cross-Origin-Anfragen verfügbar, ohne dass der HTTP-Antwort-Header Timing-Allow-Origin erforderlich ist.
Wert
Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, die Ressource abzurufen.
Beispiele
Zeit zum Abrufen messen (ohne Weiterleitungen)
Die Eigenschaften fetchStart und responseEnd können verwendet werden, um die Gesamtzeit zu messen, die zum Abrufen der endgültigen Ressource benötigt wurde (ohne Weiterleitungen). Wenn Sie Weiterleitungen einschließen möchten, wird die Gesamtzeit zum Abrufen in der Eigenschaft duration bereitgestellt.
const timeToFetch = entry.responseEnd - entry.fetchStart;
Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, sobald diese in der Performance-Zeitachse des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers zuzugreifen.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Beispiel mit Performance.getEntriesByType(), das nur resource-Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitachse des Browsers vorhanden sind:
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
Spezifikationen
| Spezifikation |
|---|
| Resource Timing # dom-performanceresourcetiming-fetchstart |