Start · Sprachen · JavaScript · Referenz · Event.timeStamp

Event.timeStamp

Eigenschaft

Schreibgeschützte Eigenschaft, die den Zeitpunkt der Ereigniserstellung als <code>DOMHighResTimeStamp</code> in Millisekunden relativ zum Zeitursprung der Seite liefert.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

Event.timeStamp

Beschreibung

Die schreibgeschützte Eigenschaft timeStamp jedes Event-Objekts gibt an, wann das Ereignis erzeugt wurde. Der Wert ist ein DOMHighResTimeStamp, also eine Gleitkommazahl in Millisekunden. Er wird relativ zum Zeitursprung (performance.timeOrigin) des aktuellen Dokuments bzw. Workers gemessen und nicht relativ zur Unix-Epoche.

Weil event.timeStamp und performance.now() dieselbe Zeitbasis nutzen, lässt sich damit gut messen, wie viel Zeit zwischen Nutzereingabe und Verarbeitung vergeht (Eingabeverzögerung). Auch Doppelklicks, Gesten-Geschwindigkeiten und Abstände zwischen Tastenanschlägen lassen sich präzise berechnen, ohne selbst Date.now() aufzurufen.

Der Wert wird beim Erzeugen des Ereignisses festgelegt, nicht beim Auslösen. Bei selbst erstellten Ereignissen (new Event(), new CustomEvent()) ist er der Zeitpunkt des Konstruktor-Aufrufs. Browser runden den Wert aus Sicherheitsgründen, damit keine Timing-Angriffe möglich sind.

Rückgabewert

Typ
number (DOMHighResTimeStamp)
Beschreibung
Millisekunden seit dem Zeitursprung der Seite (performance.timeOrigin), eventuell mit Nachkommastellen. Die Eigenschaft ist schreibgeschützt.

Beispiele

Eingabeverzögerung eines Klicks messen

const button = document.querySelector('#speichern');

button.addEventListener('click', (event) => {
  // Zeit zwischen Ereigniserstellung und Handler-Ausführung
  const verzoegerung = performance.now() - event.timeStamp;
  console.log(`Eingabeverzögerung: ${verzoegerung.toFixed(1)} ms`);
});
Eingabeverzögerung: 3.2 ms

Abstand zwischen Tastenanschlägen ermitteln

const eingabe = document.querySelector('#suche');
let letzterAnschlag = null;

eingabe.addEventListener('keydown', (event) => {
  if (letzterAnschlag !== null) {
    const abstand = event.timeStamp - letzterAnschlag;
    console.log(`Abstand zur letzten Taste: ${Math.round(abstand)} ms`);
  }
  letzterAnschlag = event.timeStamp;
});
Abstand zur letzten Taste: 142 ms

timeStamp in absolute Uhrzeit umrechnen

document.addEventListener('pointerdown', (event) => {
  const epochMs = performance.timeOrigin + event.timeStamp;
  console.log(new Date(epochMs).toISOString());
}, { once: true });
2024-05-14T09:31:07.482Z

Zeitstempel eines eigenen Ereignisses

const ereignis = new CustomEvent('daten-geladen', { detail: { anzahl: 42 } });

// timeStamp wird beim Erzeugen gesetzt, nicht beim dispatchEvent()
setTimeout(() => {
  document.addEventListener('daten-geladen', (e) => {
    console.log(`Wartezeit bis Dispatch: ${Math.round(performance.now() - e.timeStamp)} ms`);
  });
  document.dispatchEvent(ereignis);
}, 500);
Wartezeit bis Dispatch: 500 ms

// Wichtig · Fallstricke

  • Zeitbasis: Heute ist der Wert relativ zu performance.timeOrigin und nicht zur Unix-Epoche. Ältere Browser (z. B. Firefox vor Version 49, alte Safari-Versionen) lieferten Epoch-Millisekunden. Wer den Wert direkt mit Date.now() vergleicht, bekommt falsche Ergebnisse. Vergleiche stattdessen mit performance.now().
  • Reduzierte Genauigkeit: Zum Schutz vor Timing- und Fingerprinting-Angriffen (Spectre) runden Browser den Wert. Firefox rundet mit privacy.reduceTimerPrecision standardmäßig auf 1 ms oder gröber, mit privacy.resistFingerprinting auf bis zu 100 ms. Ohne Cross-Origin-Isolation ist die Genauigkeit meist geringer.
  • Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert und werfen im Strict Mode keinen Fehler.
  • Die Zeitursprünge von Iframes und Workers unterscheiden sich vom Hauptdokument. Werte aus verschiedenen Kontexten lassen sich nur über performance.timeOrigin vergleichbar machen.
  • Wenn du Eingabelatenz genau messen willst, liefert die Event Timing API (PerformanceEventTiming) mehr Details.