Hur diagnostiserar du runtime-jank, long tasks och dålig INP?

Question

IT Interview Practice · Accepted Answer

Runtime-jank kommer från **long tasks som blockerar huvudtråden** — den enda tråden som hanterar JS, layout, paint och input. När en task körs för länge kan input inte behandlas, så interaktioner känns frusna och **INP** klättrar.

## Kärnmodellen: huvudtråden

```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äter fördröjningen från en användarinteraktion till nästa målning. Den har tre delar: **input delay** (huvudtråden upptagen när du klickar), **processing time** (din handler), och **presentation delay** (style/layout/paint efteråt).

## Diagnostisera

- **Performance-panelen** (Chrome DevTools): spela in en interaktion, leta efter rödflaggade **Long Tasks** (>50ms) och breda handler-ramar.
- **PerformanceObserver** för att fånga long tasks i fält:

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

## Åtgärder

- **Bryt upp long tasks** — dela upp arbete och yield:a så att input kan avbryta:

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

- **Flytta tung beräkning till en Web Worker** — håll parsning/knäckande borta från huvudtråden.
- **Debounce/throttle** dyra handlers; **virtualisera** långa listor; memoisera för att skära ner omrenderingar.
- **Skjut upp icke-brådskande arbete** med `requestIdleCallback` eller `scheduler.postTask`-prioriteter.

## Varför det är viktigt

INP är den nyaste Core Web Vital och den svåraste att åtgärda eftersom den handlar om *runtime*, inte laddning. Seniorer förväntas resonera utifrån den enkeltrådade modellen — long tasks blockerar input — och gripa efter yielding, workers och scheduling snarare än bara "optimera koden".

Kärnmodellen: huvudtråden

Diagnostisera

Åtgärder

Varför det är viktigt

Relaterade frågor