PerformanceEntry.duration — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEntry.duration

Beschreibung

duration ist eine schreibgeschützte Eigenschaft jedes PerformanceEntry. Sie liefert einen DOMHighResTimeStamp, also eine Gleitkommazahl in Millisekunden mit Bruchteilen. Zusammen mit startTime beschreibt sie das Zeitfenster eines Eintrags: Das Ende liegt bei startTime + duration.

Was die Dauer genau bedeutet, hängt vom entryType ab:

measure: Zeit zwischen Start- und Endmarke von performance.measure().
resource: responseEnd - startTime, also die gesamte Ladezeit einer Ressource.
navigation: loadEventEnd - startTime. Der Wert bleibt 0, bis das load-Ereignis abgeschlossen ist.
longtask / long-animation-frame: Laufzeit der langen Aufgabe bzw. des Frames (ab 50 ms).
event / first-input: Zeit von startTime bis zum nächsten Rendern nach der Verarbeitung, auf 8 ms gerundet.
mark, paint, largest-contentful-paint, layout-shift, element, visibility-state: immer 0, weil diese Einträge einen Zeitpunkt beschreiben und keinen Zeitraum.

Sie nutzen duration vor allem, um eigenen Code zu messen (User Timing), langsame Netzwerkanfragen zu finden (Resource Timing), die Ladezeit der Seite auszuwerten (Navigation Timing) und lange Aufgaben auf dem Hauptthread zu erkennen. So kommen Sie zu Daten für Real-User-Monitoring.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Dauer des Eintrags in Millisekunden als Gleitkommazahl. Bei Einträgen, die einen Zeitpunkt beschreiben (z. B. mark, paint), ist der Wert 0.

Beispiele

Eigenen Code mit performance.measure() messen

performance.mark('sortieren-start');

const daten = Array.from({ length: 200_000 }, () => Math.random());
daten.sort((a, b) => a - b);

performance.mark('sortieren-ende');
const messung = performance.measure('sortieren', 'sortieren-start', 'sortieren-ende');

console.log(`${messung.name}: ${messung.duration.toFixed(2)} ms`);

sortieren: 38.40 ms (Wert variiert)

Langsame Ressourcen mit PerformanceObserver finden

const SCHWELLE_MS = 500;

const observer = new PerformanceObserver((liste) => {
  for (const eintrag of liste.getEntries()) {
    if (eintrag.duration > SCHWELLE_MS) {
      console.warn(`Langsam: ${eintrag.name} (${Math.round(eintrag.duration)} ms)`);
    }
  }
});

// buffered: true liefert auch Einträge, die schon vorher entstanden sind
observer.observe({ type: 'resource', buffered: true });

Langsam: https://example.com/bilder/hero.jpg (812 ms)

Gesamte Ladezeit der Seite auswerten

window.addEventListener('load', () => {
  // Einen Tick warten, damit loadEventEnd gesetzt ist
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    console.log(`Seitenladezeit: ${Math.round(nav.duration)} ms`);
  }, 0);
});

Seitenladezeit: 1432 ms

Lange Aufgaben auf dem Hauptthread erkennen

new PerformanceObserver((liste) => {
  liste.getEntries().forEach((task) => {
    console.log(`Long Task: ${task.duration} ms ab ${task.startTime.toFixed(0)} ms`);
  });
}).observe({ type: 'longtask', buffered: true });

Long Task: 124 ms ab 2310 ms

// Wichtig · Fallstricke

Der Wert 0 ist kein Fehler: Bei mark, paint, largest-contentful-paint, layout-shift und ähnlichen Einträgen ist duration immer 0. Bei navigation bleibt der Wert 0, bis das load-Ereignis vollständig abgeschlossen ist. Lesen Sie ihn also erst danach aus, am besten in einem setTimeout.
Reduzierte Genauigkeit: Zum Schutz vor Timing-Angriffen (Spectre) runden Browser Zeitstempel ab. Ohne Cross-Origin-Isolation (COOP/COEP) liegt die Genauigkeit meist bei etwa 100 µs, in Firefox oft bei 1 ms. Bei event-Einträgen wird zusätzlich auf 8 ms gerundet.
Cross-Origin-Ressourcen: Für Ressourcen von fremden Ursprüngen ohne Header Timing-Allow-Origin ist duration zwar vorhanden, viele Detailwerte (z. B. requestStart) sind aber 0. Aus Cache geladene Ressourcen haben oft eine sehr kurze Dauer.
Puffergrenze: Der Resource-Timing-Puffer fasst standardmäßig 250 Einträge. Mit performance.setResourceTimingBufferSize() können Sie ihn vergrößern, oder Sie verwenden einen PerformanceObserver.
Kompatibilität: Die Eigenschaft selbst funktioniert in allen modernen Browsern. Einzelne Eintragstypen wie longtask, long-animation-frame und event gibt es derzeit aber vor allem in Chromium-Browsern. Prüfen Sie die Unterstützung mit PerformanceObserver.supportedEntryTypes.

Siehe auch

Performance.measure() Performance.mark() Performance.now() PerformanceEntry.startTime PerformanceEntry.entryType