DOMHighResTimeStamp — Schnittstelle · JavaScript-Referenz

Signatur

typedef double DOMHighResTimeStamp

Beschreibung

DOMHighResTimeStamp ist kein eigenständiges Objekt und keine Klasse, sondern ein Typ-Alias (WebIDL-typedef) für eine Gleitkommazahl vom Typ double. In JavaScript begegnet er dir also immer als ganz normale number. Der Wert steht für eine Zeit in Millisekunden. Durch die Nachkommastellen kann er – je nach Browser und Sicherheitskontext – bis auf Mikrosekunden genau sein.

Meist beschreibt ein DOMHighResTimeStamp eine Zeitspanne, gemessen ab dem sogenannten Zeitursprung (performance.timeOrigin). Das ist ungefähr der Zeitpunkt, zu dem das Dokument geladen oder der Worker gestartet wurde. Anders als Date.now() ist dieser Wert monoton: Er läuft stetig weiter und springt nicht, wenn jemand die Systemuhr umstellt oder die Zeit per NTP synchronisiert wird.

Diesen Typ liefern unter anderem:

performance.now() und performance.timeOrigin
der Parameter der Callback-Funktion von requestAnimationFrame()
Event.timeStamp
Einträge der Performance Timeline wie PerformanceEntry.startTime und duration sowie Werte aus PerformanceResourceTiming

Du verwendest ihn immer dann, wenn du Zeiten genau und zuverlässig messen musst, zum Beispiel beim Benchmarking, für flüssige Animationen oder für eigene Performance-Metriken.

Rückgabewert

Typ

number

Beschreibung

Eine Gleitkommazahl in Millisekunden. Sie ist in der Regel relativ zu performance.timeOrigin. performance.timeOrigin selbst ist dagegen ein absoluter Zeitpunkt in Millisekunden seit der Unix-Epoche.

Beispiele

Laufzeit einer Funktion genau messen

const fib = (n) => (n < 2 ? n : fib(n - 1) + fib(n - 2));

const start = performance.now(); // DOMHighResTimeStamp
fib(25);
const ende = performance.now();

console.log(`Dauer: ${(ende - start).toFixed(3)} ms`);
console.log(typeof start);

Dauer: 1.234 ms number

Zeitbasierte Animation mit requestAnimationFrame

const box = document.querySelector('#box');
const geschwindigkeit = 0.1; // Pixel pro Millisekunde
let startZeit;

const schritt = (zeitstempel) => { // zeitstempel ist ein DOMHighResTimeStamp
  startZeit ??= zeitstempel;
  const vergangen = zeitstempel - startZeit;
  const x = Math.min(vergangen * geschwindigkeit, 300);
  box.style.transform = `translateX(${x}px)`;
  if (x < 300) requestAnimationFrame(schritt);
};

requestAnimationFrame(schritt);

Relativen Zeitstempel in absolute Zeit umrechnen

const relativ = performance.now();
const absolut = performance.timeOrigin + relativ;

console.log(new Date(absolut).toISOString());

// Event-Zeitstempel sind ebenfalls relativ zum Zeitursprung
document.addEventListener('click', (event) => {
  const verzoegerung = performance.now() - event.timeStamp;
  console.log(`Handler-Verzögerung: ${verzoegerung.toFixed(2)} ms`);
});

2024-05-14T09:21:07.512Z Handler-Verzögerung: 0.40 ms

Performance-Einträge mit mark und measure auswerten

performance.mark('laden-start');
const antwort = await fetch('/api/daten');
await antwort.json();
performance.mark('laden-ende');

const messung = performance.measure('laden', 'laden-start', 'laden-ende');
console.log(`Start: ${messung.startTime.toFixed(1)} ms, Dauer: ${messung.duration.toFixed(1)} ms`);

Start: 812.3 ms, Dauer: 143.7 ms

// Wichtig · Fallstricke

Reduzierte Genauigkeit: Browser runden den Wert und fügen teils etwas Zufall hinzu, um Timing-Angriffe wie Spectre und Fingerprinting zu erschweren. Ohne Cross-Origin-Isolierung (Cross-Origin-Opener-Policy und Cross-Origin-Embedder-Policy) liegt die Genauigkeit oft nur bei etwa 100 µs, in Firefox mit privacy.resistFingerprinting sogar bei bis zu 100 ms. Ist die Seite isoliert (crossOriginIsolated === true), wird der Wert genauer, etwa auf 5 µs.
Nicht mit Date.now() mischen: performance.now() ist relativ zum Zeitursprung, Date.now() dagegen relativ zur Unix-Epoche. Zum Umrechnen addierst du performance.timeOrigin.
Jeder Kontext hat seinen eigenen Zeitursprung: Ein Worker, ein iframe und das Hauptdokument haben jeweils einen eigenen Ursprung. Willst du Zeitstempel aus verschiedenen Kontexten vergleichen, rechnest du sie vorher über timeOrigin in absolute Zeit um.
Uhr im Ruhezustand: Ob die Uhr weiterläuft, während das Gerät schläft oder ein Tab im Hintergrund pausiert, ist von Browser zu Browser verschieden. Für sehr lange Zeiträume ist sie deshalb nur bedingt zuverlässig.
Werte in älteren Browsern: In alten Browsern war Event.timeStamp teils ein Epoch-Wert (DOMTimeStamp) statt eines DOMHighResTimeStamp. Alle aktuellen Browser liefern den hochauflösenden Wert.
Node.js: Dort ist performance.now() global verfügbar (ab Version 16, vorher über require('perf_hooks')).

Siehe auch

Performance.now() Performance.timeOrigin Event.timeStamp Date.now() XRLightEstimate