¿Cómo diagnosticas el jank en runtime, las long tasks y un INP deficiente?

Question

IT Interview Practice · Accepted Answer

El jank en runtime proviene de **long tasks que bloquean el hilo principal**, el único hilo que maneja JS, layout, paint e input. Cuando una tarea se ejecuta demasiado tiempo, el input no puede procesarse, así que las interacciones se sienten congeladas y el **INP** sube.

## El modelo central: el hilo 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 mide el retraso desde una interacción del usuario hasta el siguiente paint. Tiene tres partes: **input delay** (hilo principal ocupado cuando haces clic), **processing time** (tu handler) y **presentation delay** (style/layout/paint después).

## Diagnóstico

- **Panel Performance** (Chrome DevTools): graba una interacción, busca las **Long Tasks** (>50ms) marcadas en rojo y los frames anchos de handlers.
- **PerformanceObserver** para atrapar long tasks en campo:

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

## Correcciones

- **Divide las long tasks**: fragmenta el trabajo y cede (yield) para que el input pueda interrumpir:

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

- **Mueve el cómputo pesado a un Web Worker**: mantén el parseo/procesamiento fuera del hilo principal.
- **Debounce/throttle** en handlers costosos; **virtualiza** listas largas; memoiza para reducir re-renders.
- **Aplaza el trabajo no urgente** con `requestIdleCallback` o las prioridades de `scheduler.postTask`.

## Por qué es importante

INP es la Core Web Vital más nueva y la más difícil de corregir porque trata del *runtime*, no de la carga. Se espera que los seniors razonen desde el modelo de hilo único (las long tasks bloquean el input) y recurran a ceder (yielding), workers y scheduling en lugar de solo "optimizar el código".

El modelo central: el hilo principal

Diagnóstico

Correcciones

Por qué es importante

Preguntas relacionadas