Kepiye carane ndiagnosa jank runtime, long task, lan INP sing elek?

Question

IT Interview Practice · Accepted Answer

Jank runtime asale saka **long task sing mblokir main thread** — siji-sijine thread sing nangani JS, layout, paint, lan input. Nalika sawijining task mlaku suwe banget, input ora bisa diproses, mula interaksi krasa mandheg lan **INP** munggah.

## Model inti: main thread

```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 ngukur telat saka interaksi pangguna nganti paint sabanjure. Iki duwe telung bagean: **input delay** (main thread sibuk nalika sampeyan ngeklik), **processing time** (handler sampeyan), lan **presentation delay** (style/layout/paint sawise).

## Ndiagnosa

- **Performance panel** (Chrome DevTools): rekam sawijining interaksi, goleki **Long Task** (>50ms) sing ditandhani abang lan frame handler sing amba.
- **PerformanceObserver** kanggo nyekel long task ing lapangan:

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

## Betulan

- **Pecah long task** — potong gawean dadi chunk lan yield supaya input bisa nyela:

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

- **Pindhah komputasi abot menyang Web Worker** — jaga parsing/pangolahan supaya adoh saka main thread.
- **Debounce/throttle** handler sing larang; **virtualisasi** list dawa; memoize kanggo nyuda re-render.
- **Tundha gawean sing ora penting** nganggo prioritas `requestIdleCallback` utawa `scheduler.postTask`.

## Kenapa iki penting

INP iku Core Web Vital paling anyar lan paling angel didandani amarga iki babagan *runtime*, dudu load. Senior dikarepake nalar saka model single-thread — long task mblokir input — lan milih yielding, worker, lan scheduling tinimbang mung "ngoptimalake kode."

Model inti: main thread

Ndiagnosa

Betulan

Kenapa iki penting

Pitakon sing gegandhengan