Performance.setResourceTimingBufferSize() — Methode · JavaScript-Referenz

Signatur

Performance.prototype.setResourceTimingBufferSize(maxSize)

Beschreibung

Browser zeichnen für jede geladene Ressource (Skripte, Bilder, Stylesheets, fetch()-Aufrufe usw.) einen PerformanceResourceTiming-Eintrag auf. Diese Einträge landen in einem begrenzten Puffer, den man über performance.getEntriesByType("resource") abfragen kann. Laut Spezifikation fasst der Puffer standardmäßig mindestens 250 Einträge.

Mit setResourceTimingBufferSize() vergrößern oder verkleinern Sie diesen Puffer. Das lohnt sich vor allem bei ressourcenlastigen Seiten wie Single-Page-Apps, Seiten mit vielen Bildern oder beim Real-User-Monitoring (RUM). Dort ist die Standardgröße schnell erreicht, und alle weiteren Einträge gehen verloren.

Ist der Puffer voll, feuert das Ereignis resourcetimingbufferfull am Performance-Objekt. Im Handler können Sie die Einträge auswerten und den Puffer mit clearResourceTimings() leeren oder ihn vergrößern. Für neue Projekte ist ein PerformanceObserver meist die bessere Wahl: Er liefert Einträge laufend und hängt nicht von der Puffergröße ab.

Parameter

Name	Typ	Default	Beschreibung
$maxSize Pflicht	number		Maximale Anzahl an `"resource"`-Einträgen, die der Puffer aufnehmen soll. Der Wert wird in eine vorzeichenlose Ganzzahl umgewandelt (`unsigned long`).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Puffer für eine ressourcenreiche Seite vergrößern

// Möglichst früh im Dokument ausführen, z. B. in einem Inline-Skript im <head>
if (typeof performance.setResourceTimingBufferSize === 'function') {
  performance.setResourceTimingBufferSize(500);
}

window.addEventListener('load', () => {
  const count = performance.getEntriesByType('resource').length;
  console.log(`Erfasste Ressourcen: ${count}`);
});

Erfasste Ressourcen: 312

Auf vollen Puffer reagieren und Daten sichern

const collected = [];

performance.setResourceTimingBufferSize(200);

performance.addEventListener('resourcetimingbufferfull', () => {
  // Einträge sichern, bevor der Puffer geleert wird
  collected.push(...performance.getEntriesByType('resource'));
  performance.clearResourceTimings();
  console.log(`Puffer geleert, bisher gesichert: ${collected.length}`);
});

Puffer geleert, bisher gesichert: 200

Puffer bei Bedarf dynamisch verdoppeln

let bufferSize = 250;
performance.setResourceTimingBufferSize(bufferSize);

performance.onresourcetimingbufferfull = () => {
  bufferSize *= 2;
  performance.setResourceTimingBufferSize(bufferSize);
  console.log(`Neue Puffergröße: ${bufferSize}`);
};

Neue Puffergröße: 500

Moderne Alternative: PerformanceObserver ohne Pufferlimit

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, Math.round(entry.duration), 'ms');
  }
});

// buffered: true liefert auch bereits erfasste Einträge nach
observer.observe({ type: 'resource', buffered: true });

https://example.com/app.js 84 ms

// Wichtig · Fallstricke

Früh aufrufen: Ist der Puffer bereits voll, bevor Sie ihn vergrößern, sind die überzähligen Einträge verloren. Rufen Sie die Methode deshalb so früh wie möglich im Seitenlebenszyklus auf.
Verkleinern löscht nichts: Ein Wert unter der aktuellen Anzahl entfernt keine vorhandenen Einträge. Es kommen nur keine neuen mehr hinzu, bis der Puffer geleert wird.
Speicherbedarf: Sehr große Werte halten viele Objekte im Speicher. Für Langzeit-Messungen ist PerformanceObserver mit regelmäßiger Übertragung der Daten die sparsamere Lösung.
Nur Resource Timing: Die Methode betrifft ausschließlich Einträge vom Typ "resource". Andere Typen wie mark, measure oder navigation sind nicht betroffen.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, auch in Web Workern über self.performance. In Node.js steht die Methode in perf_hooks ab Version 18.8 zur Verfügung.
Cross-Origin-Ressourcen: Einträge fremder Ursprünge werden zwar erfasst, detaillierte Zeitwerte gibt es aber nur, wenn der Server den Header Timing-Allow-Origin sendet.

Siehe auch

Performance.clearResourceTimings() Performance.getEntriesByType() PerformanceResourceTiming PerformanceObserver Performance.toJSON() PerformanceObserverEntryList.getEntriesByType()