Jak diagnostikujete runtime jank, long tasks a špatné INP?

Question

IT Interview Practice · Accepted Answer

Runtime jank pochází z **long tasků blokujících hlavní vlákno** — jediného vlákna, které obsluhuje JS, layout, paint a vstup. Když úloha běží příliš dlouho, vstup nelze zpracovat, takže interakce působí zamrzle a **INP** roste.

## Základní model: hlavní vlákno

```text
Hlavní vlákno: [ event handler 180 ms ]  vstup zařazen... vykresleno ─▶ INP = čas do dalšího paintu
               └── „long task“ (>50 ms) blokuje vše, včetně reakce na kliknutí
```

INP měří prodlevu od uživatelské interakce do dalšího paintu. Má tři části: **input delay** (hlavní vlákno je zaneprázdněné, když kliknete), **processing time** (váš handler) a **presentation delay** (styl/layout/paint poté).

## Diagnóza

- **Panel Performance** (Chrome DevTools): nahrajte interakci, hledejte červeně označené **Long Tasks** (>50 ms) a široké rámce handlerů.
- **PerformanceObserver** k zachycení long tasků v terénu:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // najdi reálné blokátory
  }
}).observe({ type: "longtask", buffered: true });
```

## Opravy

- **Rozbijte long tasky** — rozdělte práci na kusy a uvolněte (yield), aby ji vstup mohl přerušit:

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

- **Přesuňte náročný výpočet do Web Workeru** — držte parsování/drcení mimo hlavní vlákno.
- **Debounce/throttle** nákladných handlerů; **virtualizujte** dlouhé seznamy; memoizujte pro omezení re-renderů.
- **Odložte neurgentní práci** pomocí `requestIdleCallback` nebo priorit `scheduler.postTask`.

## Proč je to důležité

INP je nejnovější Core Web Vital a nejtěžší na opravu, protože jde o *runtime*, ne o načítání. Od seniorů se očekává, že budou uvažovat z jednovláknového modelu — long tasky blokují vstup — a sáhnou po yieldingu, workerech a plánování místo pouhého „optimalizuj kód“.

Základní model: hlavní vlákno

Diagnóza

Opravy

Proč je to důležité

Související otázky