Signatur
Beschreibung
Die Eigenschaft detail eines PerformanceMark-Objekts enthält die Zusatzdaten, die beim Anlegen der Markierung im Optionsobjekt als detail übergeben wurden. Damit hängen Sie eigene Kontextinformationen an einen Messpunkt, etwa die ID einer Komponente, eine Route, eine Nutzeraktion oder die Anzahl geladener Datensätze.
Solche Metadaten helfen bei der Auswertung von Performance-Daten. Ein reiner Zeitstempel sagt nur wann etwas passiert ist. Mit detail lässt sich festhalten, was und unter welchen Umständen es passiert ist. Das ist nützlich, wenn Sie Markierungen gesammelt an ein Analyse- oder RUM-Backend schicken oder mit einem PerformanceObserver gezielt filtern wollen.
Beim Erstellen der Markierung wird der übergebene Wert mit dem Structured-Clone-Algorithmus kopiert. Spätere Änderungen am ursprünglichen Objekt wirken sich also nicht auf detail aus. Wurde kein detail angegeben, ist der Wert null.
Rückgabewert
detail-Werts (Objekt, Array, String, Zahl …) oder null, wenn kein detail angegeben wurde.Beispiele
Metadaten mit performance.mark() anhängen und auslesen
const mark = performance.mark('produktliste-geladen', {
detail: { route: '/produkte', anzahl: 48, cache: false }
});
console.log(mark.detail);
console.log(mark.detail.anzahl);Konstruktor ohne detail und Kopierverhalten
const ohne = new PerformanceMark('start');
console.log(ohne.detail); // kein detail übergeben
const info = { schritt: 1 };
const mit = new PerformanceMark('checkout', { detail: info });
info.schritt = 99; // ändert das Original, nicht die Kopie
console.log(mit.detail.schritt);
console.log(mit.detail === info);Markierungen per PerformanceObserver nach detail filtern
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// nur Markierungen einer bestimmten Komponente auswerten
if (entry.detail?.komponente === 'Warenkorb') {
console.log(`${entry.name} @ ${entry.startTime.toFixed(1)} ms`, entry.detail);
}
}
});
observer.observe({ type: 'mark', buffered: true });
performance.mark('render-start', { detail: { komponente: 'Warenkorb' } });
performance.mark('render-start', { detail: { komponente: 'Header' } });Markierungen samt Metadaten an ein Analyse-Backend senden
performance.mark('suche-ausgeführt', {
detail: { suchbegriff: 'laptop', treffer: 17 }
});
const payload = performance.getEntriesByType('mark').map(({ name, startTime, detail }) => ({
name,
startTime: Math.round(startTime),
detail
}));
navigator.sendBeacon('/api/perf', JSON.stringify(payload));// Wichtig · Fallstricke
- Nur klonbare Werte:
detailwird per Structured Clone kopiert. Funktionen, DOM-Knoten oder Symbole lösen beim Erstellen eineDataCloneError-DOMExceptionaus. Nutzen Sie einfache Objekte, Arrays und primitive Werte. - Standardwert
null: Ohnedetail-Option ist der Wertnullund nichtundefined. Beim Zugriff auf verschachtelte Felder hilft optionale Verkettung (entry.detail?.feld). - Schreibgeschützt: Eine Zuweisung an
mark.detailhat keine Wirkung (im Strict Mode gibt es einenTypeError). Verschachtelte Eigenschaften des geklonten Objekts lassen sich jedoch verändern, weil es nicht eingefroren ist. - Speicher und Datenschutz: Markierungen bleiben im Performance-Puffer, bis
performance.clearMarks()aufgerufen wird. Legen Sie keine großen Datenmengen und keine personenbezogenen oder sensiblen Daten (Tokens, E-Mail-Adressen) indetailab, vor allem wenn Einträge an Dritte übertragen werden. - Kompatibilität: Die Option
detailund der KonstruktorPerformanceMark()stammen aus User Timing Level 3. Ältere Browser (z. B. Firefox vor Version 101) geben beiperformance.mark()undefinedzurück und ignorierendetail. Die Eigenschaft ist auch in Web Workern und in Node.js (perf_hooks) verfügbar.