Signatur
Beschreibung
performance.clearResourceTimings() löscht alle PerformanceResourceTiming-Einträge, die der Browser für geladene Ressourcen (Skripte, Stylesheets, Bilder, fetch()- und XMLHttpRequest-Anfragen usw.) im Ressourcen-Timing-Puffer gesammelt hat. Danach geben performance.getEntriesByType("resource") und performance.getEntries() keine Ressourceneinträge mehr zurück, bis neue Ressourcen geladen werden.
Der Puffer hat eine begrenzte Größe (Standard: 250 Einträge, einstellbar über performance.setResourceTimingBufferSize()). Ist er voll, werden neue Einträge verworfen und das Event resourcetimingbufferfull ausgelöst. Typischerweise liest man die Daten deshalb regelmäßig aus, schickt sie etwa an einen Monitoring-Endpunkt und leert den Puffer anschließend mit clearResourceTimings(). So wird Platz für neue Messungen geschaffen, und kein Eintrag wird doppelt gemeldet.
Die Methode betrifft nur Einträge vom Typ "resource". Markierungen und Messungen (mark/measure), Navigations- und Paint-Einträge bleiben erhalten. Einträge, die ein bereits registrierter PerformanceObserver empfangen hat, sind davon unabhängig. Der Observer bekommt sie trotzdem.
Rückgabewert
undefined).Beispiele
Puffer leeren und Wirkung prüfen
const before = performance.getEntriesByType('resource').length;
console.log(`Ressourceneinträge vorher: ${before}`);
performance.clearResourceTimings();
const after = performance.getEntriesByType('resource').length;
console.log(`Ressourceneinträge nachher: ${after}`);Bei vollem Puffer Daten senden und leeren
const flushResourceTimings = () => {
const entries = performance.getEntriesByType('resource').map((e) => ({
name: e.name,
type: e.initiatorType,
duration: Math.round(e.duration),
size: e.transferSize
}));
if (entries.length > 0) {
navigator.sendBeacon('/api/rum', JSON.stringify(entries));
}
performance.clearResourceTimings();
};
// Wird ausgelöst, wenn der Puffer (Standard: 250 Einträge) voll ist
performance.addEventListener('resourcetimingbufferfull', () => {
console.warn('Ressourcen-Puffer voll – wird geleert');
flushResourceTimings();
});
// Zusätzlich beim Verlassen der Seite senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') flushResourceTimings();
});Nur eine bestimmte Aktion messen
const measureRequests = async (action) => {
performance.clearResourceTimings(); // alte Einträge entfernen
await action();
return performance.getEntriesByType('resource')
.filter((e) => e.initiatorType === 'fetch')
.map((e) => `${e.name}: ${e.duration.toFixed(1)} ms`);
};
const results = await measureRequests(async () => {
await fetch('/api/users');
await fetch('/api/settings');
});
console.log(results);// Wichtig · Fallstricke
- Gilt für alle: Der Puffer wird für den gesamten Dokument- bzw. Worker-Kontext geleert. Nutzen mehrere Skripte die Ressourcen-Timings (z. B. Analyse-Tools von Drittanbietern), fehlen denen danach die Daten. Für eine konfliktfreie Erfassung ist ein
PerformanceObservermittype: "resource"undbuffered: truemeist die bessere Wahl. - Nicht rückgängig zu machen: Gelöschte Einträge lassen sich nicht wiederherstellen. Lies die Daten also vor dem Aufruf aus.
- Puffergröße: Die Methode setzt die Anzahl der Einträge auf 0. Die mit
setResourceTimingBufferSize()eingestellte Maximalgröße ändert sie nicht. - Ursprungsübergreifende Ressourcen: Bei fremden Ursprüngen ohne
Timing-Allow-Origin-Header sind viele Zeitwerte 0. Das hat nichts mitclearResourceTimings()zu tun, fällt aber beim Auswerten oft auf. - Kompatibilität: Wird von allen modernen Browsern und von Node.js (
perf_hooks, ab v18) unterstützt. Sehr alte Browser kannten teilweise nurwebkitClearResourceTimings().