Wie diagnostizierst du Runtime-Jank, Long Tasks und schlechtes INP?

Question

IT Interview Practice · Accepted Answer

Runtime-Jank entsteht durch **Long Tasks, die den Main Thread blockieren** — den einzigen Thread, der JS, Layout, Paint und Eingaben verarbeitet. Wenn eine Task zu lange läuft, kann keine Eingabe verarbeitet werden, sodass sich Interaktionen eingefroren anfühlen und **INP** steigt.

## Das Kernmodell: der Main Thread

```text
Main thread: [ event handler 180ms ]  input queued... rendered ─▶ INP = time until next paint
             └── a "long task" (>50ms) blocks everything, including responding to the click
```

INP misst die Verzögerung von einer Nutzerinteraktion bis zum nächsten Paint. Es hat drei Teile: **Input Delay** (Main Thread beim Klick beschäftigt), **Processing Time** (dein Handler) und **Presentation Delay** (Style/Layout/Paint danach).

## Diagnose

- **Performance-Panel** (Chrome DevTools): zeichne eine Interaktion auf, achte auf rot markierte **Long Tasks** (>50 ms) und breite Handler-Frames.
- **PerformanceObserver**, um Long Tasks im Feld zu erfassen:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // find real-user blockers
  }
}).observe({ type: "longtask", buffered: true });
```

## Lösungen

- **Zerlege Long Tasks** — teile die Arbeit in Stücke und gib den Thread frei (yield), damit Eingaben unterbrechen können:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // let clicks through
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Verlagere schwere Berechnungen in einen Web Worker** — halte Parsing/Rechnen vom Main Thread fern.
- **Debounce/Throttle** teure Handler; **virtualisiere** lange Listen; memoize, um Re-Renders zu reduzieren.
- **Verschiebe nicht dringende Arbeit** mit `requestIdleCallback` oder den Prioritäten von `scheduler.postTask`.

## Warum es wichtig ist

INP ist der neueste Core Web Vital und am schwersten zu beheben, weil es um die *Laufzeit* geht, nicht ums Laden. Von Senioren wird erwartet, dass sie vom Single-Threaded-Modell aus argumentieren — Long Tasks blockieren Eingaben — und zu Yielding, Workern und Scheduling greifen, statt nur „den Code zu optimieren“.

Das Kernmodell: der Main Thread

Diagnose

Lösungen

Warum es wichtig ist

Ähnliche Fragen