Performance: resourcetimingbufferfull — Ereignis · JavaScript-Referenz

Signatur

performance.addEventListener("resourcetimingbufferfull", handler)

Beschreibung

Der Browser zeichnet für jede geladene Ressource (Bilder, Skripte, Stylesheets, fetch-Anfragen usw.) einen PerformanceResourceTiming-Eintrag auf und legt ihn in einem Puffer ab. Dieser Puffer hat eine begrenzte Größe (Standard laut Spezifikation: 250 Einträge). Ist er voll, feuert das Ereignis resourcetimingbufferfull am globalen performance-Objekt.

Registrieren lässt sich der Handler entweder per performance.addEventListener("resourcetimingbufferfull", handler) oder über die Eigenschaft performance.onresourcetimingbufferfull = handler. Das Ereignis ist ein einfaches Event ohne zusätzliche Daten, es kann nicht abgebrochen werden und steigt nicht auf (bubbles: false).

Typische Reaktionen im Handler sind: die bisherigen Einträge per performance.getEntriesByType("resource") auslesen und an einen Analyse-Server senden, anschließend den Puffer mit performance.clearResourceTimings() leeren oder die Kapazität mit performance.setResourceTimingBufferSize() erhöhen. Ressourcen, die während des Handlers geladen werden, landen zunächst in einem sekundären Zwischenpuffer; erst wenn nach dem Handler wieder Platz ist, werden sie übernommen – sonst gehen sie verloren.

Für neue Projekte ist ein PerformanceObserver mit type: "resource" meist die bessere Wahl: Er liefert Einträge laufend aus und ist nicht vom Puffer-Limit betroffen. Das Ereignis bleibt aber nützlich, wenn man mit dem klassischen Abruf über getEntries*() arbeitet.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Ereignisname: `"resourcetimingbufferfull"`.
$handler Pflicht	(event: Event) => void		Callback, der ein einfaches `Event`-Objekt erhält (`event.target === performance`).
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event ohne zusätzliche Eigenschaften.

Beispiele

Einträge sichern und Puffer leeren

const gesammelt = [];

const beiVollemPuffer = () => {
  const eintraege = performance.getEntriesByType("resource");
  gesammelt.push(...eintraege.map(({ name, duration }) => ({ name, duration })));
  console.log(`Puffer voll – ${eintraege.length} Einträge gesichert`);
  performance.clearResourceTimings();
};

performance.addEventListener("resourcetimingbufferfull", beiVollemPuffer);

Puffer voll – 250 Einträge gesichert

Puffer per on-Property vergrößern

performance.onresourcetimingbufferfull = () => {
  const aktuell = performance.getEntriesByType("resource").length;
  const neu = aktuell * 2;
  performance.setResourceTimingBufferSize(neu);
  console.log(`Puffergröße auf ${neu} erhöht`);
};

Puffergröße auf 500 erhöht

Einträge an Analyse-Endpunkt senden und Listener entfernen

const senden = () => {
  const daten = performance.getEntriesByType("resource").map((e) => ({
    url: e.name,
    dauer: Math.round(e.duration),
    groesse: e.transferSize
  }));
  navigator.sendBeacon("/api/rum", JSON.stringify(daten));
  performance.clearResourceTimings();
};

performance.addEventListener("resourcetimingbufferfull", senden);

// Später, z. B. beim Wechsel auf PerformanceObserver:
performance.removeEventListener("resourcetimingbufferfull", senden);

Puffer-Limit zum Testen künstlich verkleinern

performance.setResourceTimingBufferSize(3);

performance.addEventListener("resourcetimingbufferfull", () => {
  console.log("Voll bei", performance.getEntriesByType("resource").length, "Einträgen");
}, { once: true });

await Promise.all(["/a.json", "/b.json", "/c.json", "/d.json"].map((u) => fetch(u)));

Voll bei 3 Einträgen

// Wichtig · Fallstricke

Datenverlust: Wird im Handler weder clearResourceTimings() noch setResourceTimingBufferSize() aufgerufen, werden alle weiteren Ressourcen-Einträge verworfen und sind über getEntries*() nicht mehr erreichbar.
Das Ereignis feuert nur einmal pro „Vollwerden“ – erst nach Leeren bzw. Vergrößern und erneutem Füllen wieder.
PerformanceObserver ist vom Puffer unabhängig und für kontinuierliches Monitoring vorzuziehen; mit buffered: true erhält man zusätzlich bereits gepufferte Einträge.
Der Standardwert von 250 ist in älteren Browsern teils abweichend (ältere Chrome-Versionen nutzten 150).
Cross-Origin-Ressourcen liefern ohne Timing-Allow-Origin-Header nur eingeschränkte Zeitwerte (viele Felder 0).
Auch in Web Workern verfügbar (self.performance).

Siehe auch

Performance Performance.clearResourceTimings() Performance.setResourceTimingBufferSize() Performance.getEntriesByType() PerformanceResourceTiming PerformanceObserver Node: selectstart