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

Question

IT Interview Practice · Accepted Answer

Runtime-jank kommer av **long tasks som blokkerer hovedtråden** — den ene tråden som håndterer JS, layout, paint og input. Når en oppgave kjører for lenge, kan ikke input behandles, så interaksjoner føles frosne og **INP** klatrer.

## Kjernemodellen: hovedtråden

```text
Main thread: [ event handler 180ms ]  input i kø... rendret ─▶ INP = tid til neste paint
             └── en "long task" (>50ms) blokkerer alt, inkludert å respondere på klikket
```

INP måler forsinkelsen fra en brukerinteraksjon til neste paint. Den har tre deler: **input delay** (hovedtråden opptatt når du klikker), **processing time** (din handler), og **presentation delay** (style/layout/paint etterpå).

## Diagnostisering

- **Performance-panelet** (Chrome DevTools): ta opp en interaksjon, se etter rødflaggede **Long Tasks** (>50ms) og brede handler-frames.
- **PerformanceObserver** for å fange long tasks i field:

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

## Fikser

- **Bryt opp long tasks** — del opp arbeidet og yield så input kan avbryte:

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

- **Flytt tung beregning til en Web Worker** — hold parsing/knasing av hovedtråden.
- **Debounce/throttle** kostbare handlers; **virtualiser** lange lister; memoiser for å kutte re-renders.
- **Utsett ikke-hastende arbeid** med `requestIdleCallback` eller `scheduler.postTask`-prioriteter.

## Hvorfor det er viktig

INP er den nyeste Core Web Vital og den vanskeligste å fikse fordi det handler om *runtime*, ikke lasting. Seniorer forventes å resonnere ut fra den enkelttrådede modellen — long tasks blokkerer input — og gripe til yielding, workers og scheduling i stedet for bare å "optimalisere koden."

Kjernemodellen: hovedtråden

Diagnostisering

Fikser

Hvorfor det er viktig

Relaterte spørsmål