Start · Sprachen · JavaScript · Referenz · Performance.clearMarks()

Performance.clearMarks()

Methode

Entfernt alle oder nur die gleichnamigen <code>PerformanceMark</code>-Einträge aus der Performance-Timeline des Browsers.

seit JavaScript Baseline: alle Browser (User Timing Level 1/3), No Kategorie: webapi

Signatur

Performance.prototype.clearMarks(markName)

Beschreibung

performance.clearMarks() gehört zur User Timing API. Die Methode löscht Markierungen, die vorher mit performance.mark() in die Performance-Timeline geschrieben wurden. Ohne Argument werden alle Einträge vom Typ "mark" entfernt. Mit einem Namen verschwinden nur die Markierungen mit genau diesem Namen.

Gebraucht wird das vor allem bei lang laufenden Single-Page-Anwendungen und wiederholten Messungen, zum Beispiel pro Routenwechsel, pro Render-Durchlauf oder in Benchmark-Schleifen. Jede Markierung bleibt im Speicher, bis sie gelöscht wird. Wer immer wieder dieselben Namen vergibt, bekommt deshalb bei getEntriesByName() mehrere Treffer, und der Puffer wächst ohne Grenze. Mit clearMarks() startet jede Messung wieder in einem sauberen Zustand.

Die Methode wirkt nur auf Markierungen. Messungen, die mit performance.measure() angelegt wurden, bleiben erhalten und werden mit performance.clearMeasures() entfernt. Beobachter, die über PerformanceObserver bereits informiert wurden, sind vom Löschen nicht betroffen: Die Methode leert nur den Puffer der Timeline.

Parameter

Name Typ Default Beschreibung
$markName string Name der zu löschenden Markierung(en). Fehlt der Parameter, werden alle PerformanceMark-Einträge entfernt. Gibt es keine Markierung mit diesem Namen, passiert nichts. Es wird also kein Fehler geworfen.

Beispiele

Einzelne Markierung gezielt löschen

performance.mark('start-laden');
performance.mark('ende-laden');
performance.mark('start-render');

performance.clearMarks('start-laden');

const namen = performance.getEntriesByType('mark').map((e) => e.name);
console.log(namen);
['ende-laden', 'start-render']

Alle Markierungen entfernen

performance.mark('a');
performance.mark('b');
console.log(performance.getEntriesByType('mark').length);

performance.clearMarks();
console.log(performance.getEntriesByType('mark').length);
2 0

Wiederholte Messung eines Routenwechsels ohne Speicherwachstum

const messeRoute = async (route, ladeFn) => {
  performance.mark(`${route}:start`);
  await ladeFn();
  performance.mark(`${route}:ende`);

  const messung = performance.measure(`${route}:dauer`, `${route}:start`, `${route}:ende`);
  console.log(`${route} geladen in ${messung.duration.toFixed(1)} ms`);

  // Aufräumen, damit beim nächsten Aufruf keine doppelten Einträge entstehen
  performance.clearMarks(`${route}:start`);
  performance.clearMarks(`${route}:ende`);
  performance.clearMeasures(`${route}:dauer`);
};

const warte = (ms) => new Promise((r) => setTimeout(r, ms));

await messeRoute('/produkte', () => warte(120));
await messeRoute('/produkte', () => warte(80));
console.log(performance.getEntriesByName('/produkte:start').length);
/produkte geladen in 120.4 ms /produkte geladen in 80.2 ms 0

Verwendung in Node.js

import { performance } from 'node:perf_hooks';

performance.mark('job-start');
for (let i = 0; i < 1e6; i++);
performance.mark('job-ende');

const { duration } = performance.measure('job', 'job-start', 'job-ende');
console.log(`Dauer: ${duration.toFixed(2)} ms`);

performance.clearMarks();
performance.clearMeasures();
Dauer: 2.37 ms

// Wichtig · Fallstricke

  • Nur Markierungen: clearMarks() löscht keine PerformanceMeasure-Einträge. Dafür gibt es clearMeasures(). Ressourcen-Einträge werden mit clearResourceTimings() entfernt.
  • Späteres measure() schlägt fehl: Wird eine Markierung gelöscht, bevor performance.measure() sie als Start- oder Endpunkt nutzt, wirft measure() eine SyntaxError-DOMException, weil es die Markierung nicht mehr gibt.
  • Alle gleichnamigen Einträge: Mit einem Namen werden alle Markierungen dieses Namens gelöscht, nicht nur die jüngste.
  • Globales Löschen mit Vorsicht: Ein Aufruf ohne Argument entfernt auch Markierungen von Drittanbieter-Skripten wie Analyse- oder Monitoring-Tools, die dieselbe Timeline nutzen. In gemeinsam genutzten Umgebungen besser gezielt nach Namen löschen.
  • PerformanceObserver: Bereits zugestellte Einträge bleiben in den Beobachter-Callbacks gültig. Gelöscht wird nur der Puffer, den getEntries*() liefert.
  • Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workern. In Node.js steht die Methode über perf_hooks bereit und ist seit Node.js 16 auch als globales performance verfügbar.