Kako diagnosticiraš tresenje ob izvajanju, dolge naloge in slab INP?

Question

IT Interview Practice · Accepted Answer

Tresenje ob izvajanju izvira iz **dolgih nalog, ki blokirajo glavno nit** — edino nit, ki obravnava JS, postavitev, izris in vhod. Ko se naloga izvaja predolgo, vhoda ni mogoče obdelati, zato se interakcije zdijo zamrznjene in **INP** narašča.

## Osrednji model: glavna nit

```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 meri zamik od uporabnikove interakcije do naslednjega izrisa. Ima tri dele: **vhodni zamik** (glavna nit zasedena, ko klikneš), **čas obdelave** (tvoj obravnavalec) in **zamik prikaza** (slog/postavitev/izris po tem).

## Diagnoza

- **Panel Performance** (Chrome DevTools): posnemi interakcijo, poišči rdeče označene **Long Tasks** (>50 ms) in široke okvirje obravnavalcev.
- **PerformanceObserver** za lovljenje dolgih nalog na terenu:

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

## Popravki

- **Razbij dolge naloge** — razdeli delo na kose in prepusti nit, da lahko vhod prekine:

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

- **Prenesi zahtevno računanje v Web Worker** — razčlenjevanje/drobljenje ohrani stran od glavne niti.
- **Debounce/throttle** dragih obravnavalcev; **virtualiziraj** dolge sezname; memoiziraj, da zmanjšaš ponovne izrise.
- **Odloži nenujno delo** z `requestIdleCallback` ali prioritetami `scheduler.postTask`.

## Zakaj je to pomembno

INP je najnovejši Core Web Vital in ga je najtežje popraviti, ker gre za *izvajanje*, ne nalaganje. Od seniorjev se pričakuje, da razmišljajo iz enonitnega modela — dolge naloge blokirajo vhod — in posežejo po prepuščanju niti, workerjih in razporejanju, namesto le »optimiziraj kodo«.

Osrednji model: glavna nit

Diagnoza

Popravki

Zakaj je to pomembno

Povezana vprašanja