Come si diagnosticano jank a runtime, long task e INP scarso?

Question

IT Interview Practice · Accepted Answer

Il jank a runtime deriva dai **long task che bloccano il main thread** — il singolo thread che gestisce JS, layout, paint e input. Quando un task viene eseguito troppo a lungo, l'input non può essere elaborato, così le interazioni sembrano congelate e l'**INP** sale.

## Il modello di base: il main thread

```text
Main thread: [ event handler 180ms ]  input in coda... renderizzato ─▶ INP = tempo fino al prossimo paint
             └── un "long task" (>50ms) blocca tutto, incluso il rispondere al click
```

L'INP misura il ritardo dall'interazione dell'utente al paint successivo. Ha tre parti: **input delay** (main thread occupato quando fai click), **processing time** (il tuo handler) e **presentation delay** (style/layout/paint dopo).

## Diagnosi

- **Pannello Performance** (Chrome DevTools): registra un'interazione, cerca i **Long Task** segnalati in rosso (>50ms) e i frame degli handler larghi.
- **PerformanceObserver** per catturare i long task sul campo:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // trova i blocchi degli utenti reali
  }
}).observe({ type: "longtask", buffered: true });
```

## Correzioni

- **Spezza i long task** — suddividi il lavoro e cedi il controllo così l'input può interrompere:

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

- **Sposta il calcolo pesante su un Web Worker** — tieni parsing/elaborazione fuori dal main thread.
- **Debounce/throttle** sugli handler costosi; **virtualizza** le liste lunghe; memoizza per ridurre i re-render.
- **Rimanda il lavoro non urgente** con `requestIdleCallback` o le priorità di `scheduler.postTask`.

## Perché è importante

L'INP è il Core Web Vital più recente e il più difficile da correggere perché riguarda il *runtime*, non il caricamento. I senior devono saper ragionare a partire dal modello a thread singolo — i long task bloccano l'input — e ricorrere a yielding, worker e scheduling invece di limitarsi a "ottimizzare il codice".

Il modello di base: il main thread

Diagnosi

Correzioni

Perché è importante

Domande correlate