Hvordan diagnosticerer du runtime jank, long tasks og dårlig INP?

Question

IT Interview Practice · Accepted Answer

Runtime jank kommer af **long tasks, der blokerer main thread** — den enkelte tråd, der håndterer JS, layout, paint og input. Når en task kører for længe, kan input ikke behandles, så interaktioner føles frosne, og **INP** stiger.

## Kernemodellen: 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 måler forsinkelsen fra en brugerinteraktion til den næste paint. Den har tre dele: **input delay** (main thread optaget, når du klikker), **processing time** (din handler) og **presentation delay** (style/layout/paint bagefter).

## Diagnosticering

- **Performance panel** (Chrome DevTools): optag en interaktion, kig efter rød-flaggede **Long Tasks** (>50ms) og brede handler-frames.
- **PerformanceObserver** til at fange long tasks i field:

```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 });
```

## Rettelser

- **Bryd long tasks op** — opdel arbejde i chunks og yield, så input kan afbryde:

```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));
```

- **Flyt tung compute til en Web Worker** — hold parsing/knusning væk fra main thread.
- **Debounce/throttle** dyre handlers; **virtualisér** lange lister; memoize for at skære re-renders.
- **Udskyd ikke-hastende arbejde** med `requestIdleCallback` eller `scheduler.postTask`-prioriteter.

## Hvorfor det betyder noget

INP er den nyeste Core Web Vital og den sværeste at rette, fordi den handler om *runtime*, ikke indlæsning. Seniorer forventes at ræsonnere ud fra den single-threaded model — long tasks blokerer input — og gribe til yielding, workers og scheduling frem for bare "optimér koden".

Kernemodellen: main thread

Diagnosticering

Rettelser

Hvorfor det betyder noget

Relaterede spørgsmål