Signatur
Beschreibung
Die Eigenschaft processingEnd eines PerformanceEventTiming-Eintrags gibt an, wann der letzte synchron registrierte Ereignishandler (z. B. für click, keydown oder pointerdown) fertig war. Der Wert ist ein DOMHighResTimeStamp in Millisekunden und wird relativ zu performance.timeOrigin gemessen.
Zusammen mit processingStart lässt sich die Verarbeitungsdauer berechnen (processingEnd - processingStart). Das ist die Zeit, die Ihr JavaScript-Code in den Handlern verbraucht hat. Die Gesamtlatenz einer Interaktion teilt sich in drei Phasen auf, die auch für die Metrik Interaction to Next Paint (INP) wichtig sind:
- Eingabeverzögerung:
processingStart - startTime(der Hauptthread war noch mit anderer Arbeit beschäftigt) - Verarbeitungsdauer:
processingEnd - processingStart(Ihre Ereignishandler laufen) - Darstellungsverzögerung:
startTime + duration - processingEnd(Layout, Stil und Zeichnen bis zum nächsten Frame)
Sie lesen die Eigenschaft in der Regel über einen PerformanceObserver mit dem Typ "event" oder "first-input" aus. So finden Sie heraus, welche Handler Interaktionen ausbremsen, und können gezielt optimieren, z. B. Arbeit aufteilen oder mit scheduler.yield() bzw. setTimeout verschieben.
Rückgabewert
performance.timeOrigin), zu dem der letzte Ereignishandler beendet war. Gibt es keine Handler, entspricht der Wert processingStart.Beispiele
Verarbeitungsdauer langsamer Interaktionen messen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const verarbeitung = entry.processingEnd - entry.processingStart;
console.log(`${entry.name}: Handler liefen ${verarbeitung.toFixed(1)} ms`);
}
});
// durationThreshold: nur Ereignisse ab 16 ms melden (Standard: 104 ms)
observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });Latenz in drei Phasen aufschlüsseln (INP-Analyse)
const po = new PerformanceObserver((list) => {
for (const e of list.getEntries()) {
if (!e.interactionId) continue; // nur echte Benutzerinteraktionen
const phasen = {
eingabeVerzoegerung: Math.round(e.processingStart - e.startTime),
verarbeitung: Math.round(e.processingEnd - e.processingStart),
darstellung: Math.round(e.startTime + e.duration - e.processingEnd),
};
console.table({ [e.name]: phasen });
}
});
po.observe({ type: 'event', buffered: true, durationThreshold: 40 });First Input: Handlerdauer beim ersten Klick
new PerformanceObserver((list) => {
const [first] = list.getEntries();
const dauer = first.processingEnd - first.processingStart;
console.log(`Erste Eingabe (${first.name}) – Handlerzeit: ${dauer.toFixed(1)} ms`);
}).observe({ type: 'first-input', buffered: true });
document.querySelector('button')?.addEventListener('click', () => {
// teure synchrone Arbeit simulieren
const ende = performance.now() + 50;
while (performance.now() < ende) {}
});// Wichtig · Fallstricke
- Browser-Unterstützung: Chromium-Browser unterstützen die Eigenschaft seit Version 76, Firefox seit 89. Safari hat sie erst kürzlich ergänzt. Prüfen Sie die Verfügbarkeit mit
PerformanceObserver.supportedEntryTypes.includes('event'). - Nur synchrone Arbeit:
processingEnderfasst nur den synchronen Teil der Handler. Asynchron angestoßene Arbeit (Promises,setTimeout,fetch-Antworten) ist nicht enthalten. Sie kann aber die Darstellungsverzögerung erhöhen. - Schwellenwert: Der Typ
"event"meldet standardmäßig nur Ereignisse mit einerdurationab 104 ms. MitdurationThresholdsenken Sie den Wert, das Minimum liegt bei 16 ms. - Gerundete Zeit:
durationwird auf 8 ms gerundet,processingStartundprocessingEnddagegen nicht. Rechnungen mit allen drei Werten sind deshalb nur ungefähr genau. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert (im strikten Modus:
TypeError).