Signatur
PerformanceObserver.prototype.disconnect()
Beschreibung
Die Methode disconnect() meldet einen PerformanceObserver von allen Eintragstypen ab, die vorher mit observe() registriert wurden. Danach ruft der Browser den Callback des Beobachters nicht mehr auf, auch wenn neue Einträge wie resource, mark, measure oder largest-contentful-paint entstehen.
Typische Einsatzfälle:
- Du brauchst eine Metrik nur einmal, zum Beispiel den ersten
paint-Eintrag oder den endgültigen LCP-Wert, sobald der Nutzer interagiert. - Du räumst beim Aufräumen einer Komponente oder beim Verlassen einer Single-Page-App-Route auf, damit kein Speicherleck entsteht.
- Du willst die Datenerfassung nach einer bestimmten Zeit oder Anzahl von Einträgen beenden.
Die Instanz bleibt danach gültig. Du kannst sie mit einem neuen Aufruf von observe() wieder aktivieren. Einträge, die schon gepuffert sind, aber dem Callback noch nicht übergeben wurden, werden verworfen. Wenn du sie noch brauchst, hole sie dir vorher mit takeRecords().
Rückgabewert
Typ
void
Beschreibung
Gibt
undefined zurück.Beispiele
Beobachtung nach dem ersten Eintrag beenden
const observer = new PerformanceObserver((list, obs) => {
const [entry] = list.getEntriesByName('first-contentful-paint');
if (entry) {
console.log(`FCP: ${entry.startTime.toFixed(1)} ms`);
obs.disconnect(); // weitere Einträge sind hier nicht mehr nötig
}
});
observer.observe({ type: 'paint', buffered: true });FCP: 812.4 ms
LCP bei der ersten Nutzerinteraktion festhalten
let lcp = 0;
const lcpObserver = new PerformanceObserver((list) => {
const entries = list.getEntries();
lcp = entries.at(-1).startTime;
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
const finalize = () => {
// Einträge holen, die noch nicht zugestellt wurden, dann beenden
const pending = lcpObserver.takeRecords();
if (pending.length) lcp = pending.at(-1).startTime;
lcpObserver.disconnect();
console.log(`Finaler LCP: ${Math.round(lcp)} ms`);
};
['keydown', 'pointerdown'].forEach((type) =>
addEventListener(type, finalize, { once: true, capture: true })
);Finaler LCP: 1430 ms
Aufräumen in einer Komponente (z. B. React-Hook)
import { useEffect } from 'react';
export const useResourceTiming = (onEntry) => {
useEffect(() => {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(onEntry);
});
observer.observe({ type: 'resource', buffered: true });
// Beim Unmount abmelden, damit kein Speicherleck entsteht
return () => observer.disconnect();
}, [onEntry]);
};Wiederverwendung nach disconnect()
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((e) => console.log(e.name, e.duration));
});
observer.observe({ type: 'measure' });
performance.mark('a');
performance.mark('b');
performance.measure('a-bis-b', 'a', 'b');
setTimeout(() => {
observer.disconnect();
performance.measure('ignoriert', 'a', 'b'); // wird nicht gemeldet
observer.observe({ type: 'measure' }); // Beobachtung wieder aktiv
performance.measure('wieder-da', 'a', 'b');
}, 0);a-bis-b 0.1
wieder-da 0.1
// Wichtig · Fallstricke
- Gepufferte Einträge gehen verloren:
disconnect()verwirft Einträge, die dem Callback noch nicht übergeben wurden. Brauchst du sie noch, rufe vorhertakeRecords()auf. Das ist besonders wichtig beim Abschluss von Metriken, etwa beivisibilitychangeoderpagehide. - Kein teilweises Abmelden:
disconnect()beendet immer die Beobachtung aller Eintragstypen. Einen einzelnen Typ kannst du nicht abmelden. Willst du nur einen Typ beenden, lege für jeden Typ einen eigenen Beobachter an. - Der Aufruf ist idempotent: Ein mehrfacher Aufruf oder ein Aufruf ohne vorheriges
observe()wirft keinen Fehler. - Die Performance-Zeitleiste selbst bleibt unverändert.
performance.getEntriesByType()liefert die Einträge weiterhin. - Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt, ebenso in Web Workern und in Node.js über
perf_hooks. Welche Eintragstypen es gibt, variiert je nach Browser (siehePerformanceObserver.supportedEntryTypes).