Signatur
Beschreibung
Die Eigenschaft target eines PerformanceEventTiming-Eintrags verweist auf den Knoten, an den das Ereignis zuletzt übermittelt wurde. Damit lässt sich eine langsame Interaktion, etwa ein verzögerter Klick oder Tastendruck, einem konkreten Element auf der Seite zuordnen.
Am häufigsten braucht man target beim Messen der Reaktionsfähigkeit, also für Metriken wie Interaction to Next Paint (INP) oder First Input Delay (FID). Ein PerformanceObserver vom Typ "event" oder "first-input" liefert die Zeitwerte (duration, processingStart, processingEnd). Über target erfahren Sie, welches Element betroffen war, zum Beispiel ein bestimmter Button oder ein Formularfeld.
Der Wert ist null, wenn der Knoten nicht mehr mit dem Dokument verbunden ist, etwa weil er inzwischen aus dem DOM entfernt wurde, oder wenn er in einem Shadow DOM liegt, auf das die Seite keinen Zugriff hat. Ein Knoten wird nicht erfasst, wenn er in einem anderen Dokument liegt. Wer das Ergebnis auswertet oder an ein Analyse-Backend sendet, sollte deshalb immer mit null rechnen und aus dem Element eine serialisierbare Beschreibung ableiten, zum Beispiel einen CSS-Selektor.
Rückgabewert
null, wenn er nicht mehr im Dokument hängt bzw. nicht zugänglich ist.Beispiele
Langsame Interaktionen einem Element zuordnen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Nur Interaktionen über 100 ms betrachten
if (entry.duration > 100) {
console.log(`${entry.name} dauerte ${entry.duration} ms`, entry.target);
}
}
});
observer.observe({ type: 'event', durationThreshold: 16, buffered: true });Ziel des ersten Inputs (FID) als Selektor protokollieren
const describe = (node) => {
if (!node || node.nodeType !== Node.ELEMENT_NODE) return '(unbekannt)';
let sel = node.tagName.toLowerCase();
if (node.id) sel += `#${node.id}`;
if (node.classList.length) sel += `.${[...node.classList].join('.')}`;
return sel;
};
new PerformanceObserver((list) => {
const [entry] = list.getEntries();
const delay = entry.processingStart - entry.startTime;
console.log(`Erster Input auf ${describe(entry.target)}, Verzögerung ${delay.toFixed(1)} ms`);
}).observe({ type: 'first-input', buffered: true });Messdaten per sendBeacon an die Analyse schicken
const slow = [];
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.interactionId && entry.duration > 200) {
slow.push({
type: entry.name,
duration: Math.round(entry.duration),
// Knoten selbst ist nicht serialisierbar – nur Beschreibung senden
target: entry.target?.id || entry.target?.nodeName || null
});
}
}
}).observe({ type: 'event', buffered: true });
addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && slow.length) {
navigator.sendBeacon('/rum', JSON.stringify(slow));
}
});// Wichtig · Fallstricke
- Mögliches
null: Wurde das Element nach dem Ereignis aus dem DOM entfernt, etwa weil ein Framework neu gerendert hat, lieferttargetnull. Werten Sie das Ziel deshalb möglichst früh im Observer-Rückruf aus und prüfen Sie immer mit optionaler Verkettung (?.). - Nicht serialisierbar: Das Ergebnis ist ein echter DOM-Knoten.
JSON.stringify(entry)bzw.entry.toJSON()enthälttargetnicht, deshalb müssen Sie selbst einen Selektor oder eine ID ableiten. - Speicherlecks: Wenn Sie viele Einträge samt
targetdauerhaft speichern, bleiben die entfernten Knoten im Speicher. Speichern Sie stattdessen nur Beschreibungen. - Shadow DOM: Bei Ereignissen innerhalb eines geschlossenen Shadow Root verweist
targetauf den Host bzw. ist nicht zugänglich. - Kompatibilität: Die Event Timing API wird in Chromium-Browsern und Firefox unterstützt, in Safari aber noch nicht. Prüfen Sie die Verfügbarkeit mit
PerformanceObserver.supportedEntryTypes.includes('event').