PerformanceEventTiming.processingStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEventTiming.processingStart

Beschreibung

Die Eigenschaft processingStart eines PerformanceEventTiming-Eintrags gibt an, wann der Browser angefangen hat, die registrierten Event-Handler eines Ereignisses (z. B. click, keydown, pointerdown) auszuführen. Der Wert ist ein DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin.

Zusammen mit startTime (Zeitpunkt der Benutzereingabe) und processingEnd (Ende der Handler-Ausführung) lässt sich eine Interaktion in drei Phasen zerlegen:

Eingabeverzögerung (Input Delay): processingStart - startTime – wie lange das Ereignis warten musste, weil der Hauptthread belegt war.
Verarbeitungsdauer: processingEnd - processingStart – wie lange die eigenen Handler gebraucht haben.
Darstellungsverzögerung: startTime + duration - processingEnd – Zeit bis zum nächsten gezeichneten Frame.

Damit ist processingStart zentral für die Messung von Core Web Vitals wie Interaction to Next Paint (INP) und dem früheren First Input Delay (FID). Eine große Differenz zu startTime deutet auf lange Tasks hin, die den Hauptthread blockieren.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt in Millisekunden (relativ zu performance.timeOrigin), an dem die Ereignisverarbeitung begonnen hat. Immer größer oder gleich startTime.

Beispiele

Eingabeverzögerung von Klicks messen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name !== 'click') continue;
    const inputDelay = entry.processingStart - entry.startTime;
    console.log(`Klick-Eingabeverzögerung: ${inputDelay.toFixed(1)} ms`);
  }
});

// durationThreshold: nur Ereignisse ab 16 ms (Minimum) melden
observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });

Klick-Eingabeverzögerung: 42.3 ms

Interaktion in Phasen zerlegen (INP-Analyse)

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const inputDelay = entry.processingStart - entry.startTime;
    const processing = entry.processingEnd - entry.processingStart;
    const presentation = entry.startTime + entry.duration - entry.processingEnd;

    console.table({
      ereignis: entry.name,
      eingabeverzoegerung: Math.round(inputDelay),
      verarbeitung: Math.round(processing),
      darstellung: Math.round(presentation),
      gesamt: entry.duration
    });
  }
});

observer.observe({ type: 'event', durationThreshold: 40 });

ereignis: keydown, eingabeverzoegerung: 12, verarbeitung: 85, darstellung: 23, gesamt: 120

First Input Delay (FID) ermitteln

new PerformanceObserver((list) => {
  const [firstInput] = list.getEntries();
  if (!firstInput) return;
  const fid = firstInput.processingStart - firstInput.startTime;
  console.log(`FID: ${fid.toFixed(1)} ms (${firstInput.name})`);
}).observe({ type: 'first-input', buffered: true });

FID: 8.4 ms (pointerdown)

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Event Timing API wird von Chromium-Browsern (ab 76) und Firefox (ab 89) unterstützt, von Safari erst in neueren Versionen. Deshalb vorher prüfen: PerformanceObserver.supportedEntryTypes.includes('event').
Einträge vom Typ event werden nur gemeldet, wenn ihre duration den durationThreshold erreicht (Standard 104 ms, Minimum 16 ms). Kurze Ereignisse erscheinen also standardmäßig nicht.
duration ist auf 8 ms gerundet, processingStart und processingEnd dagegen nicht. Deshalb kann die berechnete Darstellungsverzögerung leicht negativ werden, wenn man zu genau rechnet.
Die Genauigkeit von Zeitstempeln kann aus Sicherheitsgründen (gegen Timing-Angriffe wie Spectre) reduziert sein, besonders ohne Cross-Origin-Isolation.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert oder werfen im Strict Mode einen Fehler.
Ein hoher Wert von processingStart - startTime kommt meist von Long Tasks. Abhilfe: Arbeit aufteilen, z. B. mit scheduler.yield() oder setTimeout.

Siehe auch

PerformanceElementTiming.presentationTime PerformanceEventTiming.processingEnd PerformanceEventTiming.cancelable PerformanceEventTiming.target PerformanceEventTiming.interactionId