Cum diagnostichezi jank-ul de runtime, long tasks și un INP slab?

Question

IT Interview Practice · Accepted Answer

Jank-ul de runtime provine din **long tasks care blochează thread-ul principal** — singurul thread care se ocupă de JS, layout, paint și input. Când o sarcină rulează prea mult, input-ul nu poate fi procesat, așa că interacțiunile par înghețate, iar **INP** crește.

## Modelul de bază: thread-ul principal

```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ăsoară întârzierea de la o interacțiune a utilizatorului până la următorul paint. Are trei părți: **input delay** (thread-ul principal ocupat când dai click), **processing time** (handler-ul tău) și **presentation delay** (style/layout/paint după).

## Diagnosticare

- **Panoul Performance** (Chrome DevTools): înregistrează o interacțiune, caută **Long Tasks** semnalate cu roșu (>50ms) și frame-uri late de handler.
- **PerformanceObserver** pentru a prinde long tasks pe teren:

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

## Corecturi

- **Sparge long tasks** — împarte munca în bucăți și cedează controlul (yield) ca input-ul să poată întrerupe:

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

- **Mută calculele grele într-un Web Worker** — ține parsarea/procesarea în afara thread-ului principal.
- **Debounce/throttle** pe handler-ele scumpe; **virtualizează** listele lungi; memoizează pentru a reduce re-randările.
- **Amână munca non-urgentă** cu `requestIdleCallback` sau prioritățile `scheduler.postTask`.

## De ce contează

INP este cel mai nou Core Web Vital și cel mai greu de corectat pentru că ține de *runtime*, nu de încărcare. De la seniori se așteaptă să raționeze din modelul cu un singur thread — long tasks blochează input-ul — și să apeleze la yielding, workeri și scheduling, nu doar la „optimizează codul”.

Modelul de bază: thread-ul principal

Diagnosticare

Corecturi

De ce contează

Întrebări conexe