PerformanceResourceTiming: transferSize-Eigenschaft

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die schreibgeschützte Eigenschaft transferSize repräsentiert die Größe (in Oktetten) der abgerufenen Ressource. Die Größe umfasst die Antwort-Header-Felder plus den Antwort-Nutzlastkörper (wie in RFC7230 definiert).

Wenn die Ressource aus einem lokalen Cache abgerufen oder wenn es sich um eine Cross-Origin-Ressource handelt, gibt diese Eigenschaft null zurück.

Wert

Die transferSize-Eigenschaft kann die folgenden Werte haben:

  • Eine Zahl, die die Größe (in Oktetten) der abgerufenen Ressource darstellt. Die Größe beinhaltet die Antwort-Header-Felder plus den Antwort-Nutzlastkörper (RFC7230).
  • 0, wenn die Ressource augenblicklich aus einem Cache abgerufen wurde.
  • 0, wenn die Ressource eine Cross-Origin-Anfrage ist und kein Timing-Allow-Origin HTTP-Antwort-Header verwendet wird.

Beispiele

Überprüfen, ob ein Cache-Treffer vorliegt

Für Umgebungen, die die responseStatus-Eigenschaft nicht unterstützen, kann die transferSize-Eigenschaft verwendet werden, um Cache-Treffer zu bestimmen. Wenn transferSize null ist und die Ressource eine nicht-null dekodierte Körpergröße hat (bedeutet, die Ressource ist gleich-origin oder hat Timing-Allow-Origin), wurde die Ressource aus einem lokalen Cache abgerufen.

Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, während sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge von vor der Erstellungs des Observers zuzugreifen.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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

Beispiel mit Performance.getEntriesByType(), welches nur resource-Performance-Einträge zeigt, die sich zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers befinden:

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
    console.log(`${entry.name} was loaded from cache`);
  }
});

Informationen zur Größe von Cross-Origin-Inhalten

Wenn der Wert der transferSize-Eigenschaft 0 ist und nicht aus einem lokalen Cache geladen wurde, könnte die Ressource eine Cross-Origin-Anfrage sein. Um Informationen zur Größe von Cross-Origin-Inhalten offenzulegen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt sein.

Zum Beispiel, um https://developer.mozilla.org die Ansicht von Inhaltsgrößen zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

Spezifikationen

Specification
Resource Timing
# dom-performanceresourcetiming-transfersize

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
transferSize

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Siehe auch