PerformanceMeasure.detail — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceMeasure.detail

Beschreibung

Die Eigenschaft detail eines PerformanceMeasure-Eintrags enthält die Zusatzdaten, die Sie beim Erzeugen der Messung im Optionsobjekt von performance.measure(name, { detail }) mitgegeben haben. Wurde nichts übergeben, ist der Wert null.

So hängen Sie Kontextinformationen direkt an eine Zeitmessung, etwa die ID einer Komponente, die aufgerufene URL, die Zahl verarbeiteter Datensätze oder eine Kategorie für Entwicklerwerkzeuge. Beim späteren Auswerten, z. B. über performance.getEntriesByType("measure") oder einen PerformanceObserver, können Sie Messungen dann gezielt filtern und gruppieren, ohne diese Informationen in den Namen der Messung zu packen.

Der Wert wird beim Erstellen mit dem Structured-Clone-Algorithmus kopiert. Die Eigenschaft liefert also eine Kopie und keinen Verweis auf das ursprüngliche Objekt. Spätere Änderungen am Ausgangsobjekt wirken sich nicht auf den Eintrag aus.

Rückgabewert

Typ

any | null

Beschreibung

Eine per Structured Clone erstellte Kopie der beim Messen übergebenen detail-Daten oder null, wenn keine angegeben wurden.

Beispiele

Metadaten an eine Messung anhängen und auslesen

performance.mark("laden-start");

// ... Arbeit simulieren
for (let i = 0; i < 1e6; i++);

performance.mark("laden-ende");

const messung = performance.measure("daten-laden", {
  start: "laden-start",
  end: "laden-ende",
  detail: { quelle: "/api/produkte", anzahl: 42 }
});

console.log(messung.detail);
console.log(messung.detail.anzahl);

{ quelle: "/api/produkte", anzahl: 42 } 42

Ohne detail-Option ist der Wert null

performance.mark("a");
performance.mark("b");

const m = performance.measure("ohne-details", "a", "b");
console.log(m.detail);

null

Messungen per PerformanceObserver nach detail filtern

const observer = new PerformanceObserver((liste) => {
  for (const eintrag of liste.getEntries()) {
    if (eintrag.detail?.komponente === "Warenkorb") {
      console.log(`${eintrag.name}: ${eintrag.duration.toFixed(1)} ms`, eintrag.detail);
    }
  }
});
observer.observe({ type: "measure", buffered: true });

const renderMessen = async (komponente) => {
  const start = performance.now();
  await new Promise((r) => setTimeout(r, 50));
  performance.measure(`render-${komponente}`, {
    start,
    detail: { komponente, version: "2.1" }
  });
};

renderMessen("Warenkorb");
renderMessen("Header");

render-Warenkorb: 50.3 ms { komponente: "Warenkorb", version: "2.1" }

Kopie statt Verweis (Structured Clone)

const info = { schritt: 1 };
const m = performance.measure("klon-test", { start: 0, detail: info });

info.schritt = 99;
console.log(m.detail.schritt);
console.log(m.detail === info);

1 false

// Wichtig · Fallstricke

Nur klonbare Werte: detail muss per Structured Clone kopierbar sein. Funktionen, DOM-Knoten oder Symbole lösen beim Aufruf von performance.measure() einen DataCloneError aus.
Schreibgeschützt: Die Eigenschaft hat keinen Setter. Eine Zuweisung wird still ignoriert bzw. wirft im Strict Mode einen TypeError. Die Eigenschaften des zurückgegebenen Objekts lassen sich dagegen ändern, da es eine Kopie ist.
Browser-Unterstützung: Die Option detail gehört zu User Timing Level 3. Ältere Browser, etwa Firefox vor Version 103, ignorieren das Optionsobjekt oder liefern undefined. Prüfen Sie defensiv mit eintrag.detail?.feld.
Speicher: Große Objekte in detail bleiben im Performance-Puffer, bis performance.clearMeasures() aufgerufen wird. Speichern Sie daher nur kompakte Metadaten.
Die Chrome DevTools werten ein detail.devtools-Objekt aus, um eigene Tracks im Performance-Panel anzuzeigen (Extensibility API).

Siehe auch

Performance.measure() PerformanceMeasure PerformanceMark.detail Performance.mark() PerformanceObserver PerformanceEntry.name