Schwerer Event-Handler: warum ein Klick 500 ms dauert und wie du es behebst

Was passiert

Wenn ein Nutzer klickt, führt der Browser deinen Event-Handler vollständig aus, bevor er den nächsten Frame zeichnen kann. Erledigt der Handler Hunderte Millisekunden synchroner Arbeit — ein großes Array filtern, DOM aufbauen, JSON parsen — ist die Seite genau so lange eingefroren. Der Nutzer sieht nichts, bis der Handler zurückkehrt.

Das ist das häufigste INP-Problem und zeigt sich in der INP-Aufschlüsselung als lange Processing-Time-Phase.

So erkennst du es

• Die Processing Time dominiert die INP-Aufschlüsselung (Input Delay und Presentation Delay sind klein).
• In den DevTools Performance beginnt eine lange Aufgabe direkt beim Event und wird deiner Handler-Funktion zugeordnet.
• Die Langsamkeit skaliert mit der Datenmenge: je mehr Zeilen/Elemente, desto schlechter fühlt sich der Klick an.

So behebst du es

• Aktualisiere zuerst die UI (gedrückter Zustand, Spinner), gib dann mit scheduler.yield() (oder setTimeout(0) als Fallback) an den Browser ab, bevor du die schwere Arbeit erledigst.
• Teile große Schleifen in Blöcke und gib zwischen den Blöcken ab, damit der Browser zeichnen kann.
• Verlagere reine Berechnungen (Parsen, Filtern, Diffing) in einen Web Worker — der Main Thread sendet nur die Eingabe und empfängt das Ergebnis.

Problem

button.addEventListener("click", () => {
  const results = filterRows(allRows)   // 400 ms of sync work
  renderTable(results)                  // user saw nothing until now
})

Lösung

button.addEventListener("click", async () => {
  button.classList.add("loading")       // instant feedback, painted first
  await scheduler.yield()               // let the browser paint
  const results = filterRows(allRows)
  renderTable(results)
  button.classList.remove("loading")
})