Kako dijagnosticirate runtime trzanje (jank), duge zadatke i loš INP?

Question

IT Interview Practice · Accepted Answer

Runtime trzanje (jank) dolazi od **dugih zadataka koji blokiraju glavnu dretvu** — jedine dretve koja obrađuje JS, layout, paint i unos. Kad se zadatak izvodi predugo, unos se ne može obraditi, pa se interakcije doimaju zamrznutima i **INP** raste.

## Ključni model: glavna dretva

```text
Glavna dretva: [ obrađivač događaja 180ms ]  unos u redu... renderirano ─▶ INP = vrijeme do idućeg painta
             └── "dugi zadatak" (>50ms) blokira sve, uključujući odgovor na klik
```

INP mjeri kašnjenje od korisničke interakcije do idućeg painta. Ima tri dijela: **input delay** (glavna dretva zauzeta kad kliknete), **processing time** (vaš obrađivač) i **presentation delay** (style/layout/paint nakon).

## Dijagnosticiranje

- **Performance panel** (Chrome DevTools): snimite interakciju, tražite crveno označene **Long Tasks** (>50ms) i široke okvire obrađivača.
- **PerformanceObserver** za hvatanje dugih zadataka na terenu:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // pronađi stvarne blokatore korisnika
  }
}).observe({ type: "longtask", buffered: true });
```

## Popravci

- **Razbijte duge zadatke** — usitnite posao i predajte kontrolu (yield) kako bi unos mogao prekinuti:

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

- **Premjestite teški izračun u Web Worker** — držite parsiranje/računanje izvan glavne dretve.
- **Debounce/throttle** skupe obrađivače; **virtualizirajte** duge liste; memoizirajte da smanjite ponovne rendere.
- **Odgodite nehitni posao** s `requestIdleCallback` ili prioritetima `scheduler.postTask`.

## Zašto je to važno

INP je najnoviji Core Web Vital i najteži za popraviti jer se tiče *runtimea*, a ne učitavanja. Od seniora se očekuje da rezoniraju iz jednodretvenog modela — dugi zadaci blokiraju unos — i posežu za yieldanjem, workerima i schedulingom umjesto samo "optimiziraj kod".

Ključni model: glavna dretva

Dijagnosticiranje

Popravci

Zašto je to važno

Povezana pitanja