PerformanceResourceTiming.nextHopProtocol — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.nextHopProtocol

Beschreibung

Die Eigenschaft nextHopProtocol eines PerformanceResourceTiming-Eintrags gibt an, welches Netzwerkprotokoll der Browser zum Abrufen der Ressource verwendet hat. Der Wert entspricht der ALPN-Protokoll-ID (Application-Layer Protocol Negotiation, RFC 7301), z. B. "http/1.1", "h2" (HTTP/2) oder "h3" (HTTP/3 über QUIC).

Typischer Einsatz ist das Real User Monitoring: Man prüft, ob Assets aus dem eigenen CDN tatsächlich per HTTP/2 oder HTTP/3 ausgeliefert werden, oder vergleicht Ladezeiten je Protokoll. Da es sich um einen Proxy-Wert handelt („next hop“), beschreibt er die Verbindung zum nächsten Netzwerkknoten – bei einem Proxy also das Protokoll zum Proxy, nicht zwingend zum Ursprungsserver.

Wurde die Ressource aus dem HTTP-Cache bedient oder ist ein Cross-Origin-Zugriff ohne Timing-Allow-Origin-Header erfolgt, ist der Wert ein leerer String "". Die Eigenschaft ist auch über PerformanceNavigationTiming verfügbar, da dieses Interface von PerformanceResourceTiming erbt.

Rückgabewert

Typ

string

Beschreibung

ALPN-Protokoll-ID wie "http/1.1", "h2" oder "h3"; leerer String "", wenn das Protokoll unbekannt ist, die Ressource aus dem Cache kam oder Cross-Origin-Beschränkungen greifen.

Beispiele

Protokoll aller geladenen Ressourcen auflisten

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

entries.forEach((entry) => {
  const protocol = entry.nextHopProtocol || '(unbekannt/Cache)';
  console.log(`${protocol.padEnd(18)} ${entry.name}`);
});

h2 https://cdn.example.com/app.js h3 https://fonts.gstatic.com/s/roboto.woff2 (unbekannt/Cache) https://example.com/logo.png

Neue Ressourcen live per PerformanceObserver überwachen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.nextHopProtocol === 'http/1.1') {
      console.warn(`Veraltetes Protokoll für ${entry.name}`);
    }
  }
});

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

Veraltetes Protokoll für https://legacy-api.example.com/data.json

Protokoll-Verteilung für RUM-Statistik ermitteln

const stats = performance
  .getEntriesByType('resource')
  .reduce((acc, { nextHopProtocol }) => {
    const key = nextHopProtocol || 'leer';
    acc[key] = (acc[key] ?? 0) + 1;
    return acc;
  }, {});

// Protokoll des Hauptdokuments
const [nav] = performance.getEntriesByType('navigation');
console.log('Dokument:', nav?.nextHopProtocol);
console.log(stats);

// Beispielhaft an Analytics senden
navigator.sendBeacon('/rum', JSON.stringify({ doc: nav?.nextHopProtocol, stats }));

Dokument: h2 { h2: 14, h3: 5, leer: 3 }

// Wichtig · Fallstricke

Cross-Origin: Für Ressourcen fremder Origins liefert die Eigenschaft nur dann einen Wert, wenn der Server den Header Timing-Allow-Origin (z. B. Timing-Allow-Origin: *) sendet – sonst "".
Cache-Treffer: Aus dem HTTP-Cache geladene Ressourcen haben in der Regel einen leeren String; immer mit einem Fallback rechnen.
Proxy/„Next Hop“: Der Wert beschreibt nur den nächsten Netzwerk-Hop. Hinter Proxys oder Service Workern kann er vom tatsächlichen Protokoll zum Ursprungsserver abweichen.
Werte nicht normiert: Ältere Browser meldeten teils abweichende Strings (z. B. "hq", "h3-29" für QUIC-Entwürfe oder "http/1.0"). Vergleiche daher tolerant, etwa mit startsWith('h3').
Kompatibilität: In Chrome, Edge und Firefox seit Langem verfügbar; Safari unterstützt die Eigenschaft erst seit Version 17. Vorher ist sie undefined – per 'nextHopProtocol' in entry prüfen.
Der Ressourcen-Puffer ist begrenzt (Standard meist 250 Einträge); bei vielen Ressourcen performance.setResourceTimingBufferSize() anpassen oder einen PerformanceObserver verwenden.

Siehe auch

PerformanceResourceTiming.initiatorType PerformanceResourceTiming.fetchStart PerformanceResourceTiming.deliveryType PerformanceResourceTiming.responseStart PerformanceResourceTiming.responseStatus