Hogyan diagnosztizálod a futásidejű akadozást (jank), a long taskokat és a gyenge INP-t?

Question

IT Interview Practice · Accepted Answer

A futásidejű akadozás abból ered, hogy **a long taskok blokkolják a fő szálat** — azt az egyetlen szálat, amely a JS-t, a layoutot, a paintet és az inputot kezeli. Amikor egy task túl sokáig fut, az inputot nem lehet feldolgozni, így az interakciók befagyottnak érződnek, és az **INP** felkúszik.

## Az alapmodell: a fő szál

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

Az INP a felhasználói interakciótól a következő paintig tartó késést méri. Három részből áll: **input delay** (a fő szál foglalt, amikor kattintasz), **feldolgozási idő** (a handlered) és **megjelenítési késés** (utána a style/layout/paint).

## Diagnosztizálás

- **Performance panel** (Chrome DevTools): rögzíts egy interakciót, keress piros jelzésű **Long Task**-okat (>50ms) és széles handler-kereteket.
- **PerformanceObserver** a long taskok fieldben való elkapására:

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

## Javítások

- **Bontsd fel a long taskokat** — darabold a munkát, és add át a vezérlést (yield), hogy az input megszakíthassa:

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

- **Helyezd a nehéz számítást egy Web Workerbe** — tartsd a feldolgozást/számolást a fő szálon kívül.
- **Debounce-old/throttle-old** a költséges handlereket; **virtualizáld** a hosszú listákat; memoizálj az újrarenderelések csökkentésére.
- **Halaszd el a nem sürgős munkát** a `requestIdleCallback`-kal vagy a `scheduler.postTask` prioritásokkal.

## Miért fontos

Az INP a legújabb Core Web Vital, és a legnehezebb javítani, mert a *futásidőről* szól, nem a betöltésről. A senioroktól elvárt, hogy az egyszálú modellből induljanak ki — a long taskok blokkolják az inputot —, és a yielding, a workerek és az ütemezés felé nyúljanak, ahelyett, hogy csak „optimalizáld a kódot”-ot mondanának.

Az alapmodell: a fő szál

Diagnosztizálás

Javítások

Miért fontos

Kapcsolódó kérdések