Hoe diagnosticeer je runtime-jank, long tasks en slechte INP?

Question

IT Interview Practice · Accepted Answer

Runtime-jank komt van **long tasks die de main thread blokkeren** — de enkele thread die JS, layout, paint en input afhandelt. Wanneer een task te lang draait, kan input niet worden verwerkt, dus interacties voelen bevroren aan en **INP** klimt.

## Het kernmodel: de main thread

```text
Main thread: [ event handler 180ms ]  input in wachtrij... gerenderd ─▶ INP = tijd tot volgende paint
             └── een "long task" (>50ms) blokkeert alles, inclusief reageren op de klik
```

INP meet de vertraging van een gebruikersinteractie tot de volgende paint. Het heeft drie delen: **input delay** (main thread bezet wanneer je klikt), **processing time** (jouw handler), en **presentation delay** (style/layout/paint erna).

## Diagnosticeren

- **Performance-paneel** (Chrome DevTools): neem een interactie op, zoek naar rood-gemarkeerde **Long Tasks** (>50ms) en brede handler-frames.
- **PerformanceObserver** om long tasks in het veld te vangen:

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

## Fixes

- **Breek long tasks op** — verdeel werk in stukken en geef ruimte zodat input kan onderbreken:

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

- **Verplaats zware berekeningen naar een Web Worker** — houd parsen/crunchen van de main thread af.
- **Debounce/throttle** dure handlers; **virtualiseer** lange lijsten; memoize om re-renders te verminderen.
- **Stel niet-urgent werk uit** met `requestIdleCallback` of `scheduler.postTask`-prioriteiten.

## Waarom het belangrijk is

INP is de nieuwste Core Web Vital en de moeilijkste om te fixen omdat het over *runtime* gaat, niet over laden. Van seniors wordt verwacht dat ze redeneren vanuit het single-threaded model — long tasks blokkeren input — en grijpen naar yielden, workers en scheduling in plaats van alleen "optimaliseer de code."

Het kernmodel: de main thread

Diagnosticeren

Fixes

Waarom het belangrijk is

Gerelateerde vragen