PerformanceResourceTiming.deliveryType — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.deliveryType

Beschreibung

Die Eigenschaft deliveryType eines PerformanceResourceTiming-Eintrags gibt an, auf welchem Weg eine Ressource zum Browser kam. Damit lassen sich Cache-Treffer direkt erkennen. Früher musste man sie über Hilfsgrößen wie transferSize === 0 erraten, und diese Methode ist wegen CORS-Beschränkungen und Service Workern unzuverlässig.

Mögliche Werte:

"cache": Die Ressource kam direkt aus dem HTTP-Cache, ohne erneute Anfrage beim Server.
"navigational-prefetch": Die Ressource wurde vorher über einen Navigations-Prefetch geladen, etwa mit der Speculation Rules API. Diesen Wert sieht man vor allem beim Navigationseintrag (PerformanceNavigationTiming).
"" (leerer String): Keiner der beiden Fälle trifft zu. Die Ressource wurde also normal über das Netzwerk geladen.

Weil PerformanceNavigationTiming von PerformanceResourceTiming erbt, gibt es die Eigenschaft auch für das Hauptdokument. Typische Einsatzzwecke sind Real-User-Monitoring (RUM), die Messung der Cache-Trefferquote und die Prüfung, ob Prefetch-Regeln tatsächlich wirken.

Rückgabewert

Typ

string

Beschreibung

"cache", "navigational-prefetch" oder "" (leerer String). Die Liste der Werte kann in Zukunft wachsen.

Beispiele

Cache-Trefferquote aller geladenen Ressourcen berechnen

const entries = performance.getEntriesByType('resource');

const ausCache = entries.filter((e) => e.deliveryType === 'cache');
const quote = entries.length
  ? ((ausCache.length / entries.length) * 100).toFixed(1)
  : 0;

console.log(`${ausCache.length} von ${entries.length} Ressourcen aus dem Cache (${quote} %)`);

12 von 20 Ressourcen aus dem Cache (60.0 %)

Prüfen, ob die aktuelle Seite per Prefetch geladen wurde

const [nav] = performance.getEntriesByType('navigation');

if (!nav || !('deliveryType' in nav)) {
  console.log('deliveryType wird nicht unterstützt');
} else if (nav.deliveryType === 'navigational-prefetch') {
  console.log('Seite kam aus dem Prefetch – Speculation Rules wirken!');
} else {
  console.log(`Normale Navigation (deliveryType: "${nav.deliveryType}")`);
}

Seite kam aus dem Prefetch – Speculation Rules wirken!

Neue Ressourcen live mit PerformanceObserver auswerten

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const art = entry.deliveryType || 'netzwerk';
    console.log(`${art.padEnd(10)} ${entry.name}`);
  }
});

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

cache https://example.com/app.css netzwerk https://example.com/api/daten.json

// Wichtig · Fallstricke

Browser-Unterstützung: Die Eigenschaft ist experimentell und nur in Chromium-Browsern verfügbar (ab Version 109). In Firefox und Safari ergibt sie undefined. Deshalb vorher mit 'deliveryType' in entry prüfen oder bei undefined einen Ersatzwert verwenden.
Leerer String ≠ unbekannt: "" bedeutet „weder Cache noch Prefetch“. undefined bedeutet dagegen „nicht unterstützt“. Diese beiden Fälle in Auswertungen nicht vermischen.
Antworten, die ein Service Worker aus der Cache Storage API liefert, gelten nicht als "cache". Der Wert bezieht sich nur auf den HTTP-Cache des Browsers.
Eine erfolgreiche Revalidierung (304 Not Modified) braucht eine Netzwerkanfrage und wird daher nicht als "cache" gemeldet.
Der Wert wird auch bei Cross-Origin-Ressourcen ohne Timing-Allow-Origin-Header geliefert. Einige Detailzeiten sind dann trotzdem 0.
Die Liste möglicher Werte kann später erweitert werden. Unbekannte Werte sollten deshalb robust behandelt werden.

Siehe auch

PerformanceObserver.supportedEntryTypes PerformanceResourceTiming.contentType PerformanceResourceTiming.initiatorType PerformanceResourceTiming.redirectEnd PerformanceResourceTiming.redirectStart