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 schreibgeschützte Eigenschaft requestStart gibt einen Zeitstempel der Zeit unmittelbar bevor der Browser beginnt, die Ressource vom Server, Cache oder einer lokalen Quelle anzufordern, zurück. Wenn die Transportverbindung fehlschlägt und der Browser die Anfrage erneut versucht, wird der Wert des neuen Anfragebeginns zurückgegeben.
Es gibt keine Ende-Eigenschaft für requestStart. Um die Anforderungszeit zu messen, berechnen Sie responseStart - requestStart (siehe das untenstehende Beispiel).
Wert
Die requestStart-Eigenschaft kann folgende Werte haben:
- Einen
DOMHighResTimeStamp, der die Zeit unmittelbar 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 Anfrage ist und keinTiming-Allow-OriginHTTP-Antwort-Header verwendet wird.0, wenn die Anfrage storniert wurde.
Wenn der firstInterimResponseStart ungleich null ist, bedeutet das, dass er denselben Wert wie requestStart für unterstützende Browser haben sollte.
Wenn es keine Zwischenantworten gibt, ist requestStart derselbe wie finalResponseHeadersStart und firstInterimResponseStart ist 0.
Beispiele
>Messen der Anforderungszeit
Die Eigenschaften requestStart und responseStart können verwendet werden, um zu messen, wie lange die Anforderung dauert.
const request = entry.responseStart - entry.requestStart;
Beispiel mit einem PerformanceObserver, der bei neuen resource-Leistungseinträgen benachrichtigt, während sie in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge von 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 mit Performance.getEntriesByType(), das 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`);
}
});
Cross-origin Timing-Informationen
Wenn der Wert der requestStart-Eigenschaft 0 ist, könnte die Ressource eine cross-origin Anfrage sein. Um das Anzeigen von Cross-origin Timing-Informationen zu erlauben, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.
Zum Beispiel, um https://developer.mozilla.org das Einsehen von Timing-Ressourcen zu erlauben, sollte die Cross-origin Ressource senden:
Timing-Allow-Origin: https://developer.mozilla.org
Spezifikationen
| Specification |
|---|
| Resource Timing> # dom-performanceresourcetiming-requeststart> |