Yaya kake bincike runtime jank, long tasks, da INP mara kyau?

Question

IT Interview Practice · Accepted Answer

Runtime jank yana zuwa daga **long tasks da ke toshe main thread** — thread guda da ke sarrafa JS, layout, paint, da input. Lokacin da task ya gudana da dadewa, ba za a iya sarrafa input ba, don haka interactions suna jin daskarewa kuma **INP** yana hawa.

## Babban model: 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 yana auna jinkiri daga user interaction zuwa next paint. Yana da sassa uku: **input delay** (main thread mai aiki lokacin da ka click), **processing time** (handler ɗinka), da **presentation delay** (style/layout/paint bayan haka).

## Bincike

- **Performance panel** (Chrome DevTools): rikodin interaction, nemi **Long Tasks** (>50ms) da aka yiwa alama ja da handler frames masu faɗi.
- **PerformanceObserver** don kama long tasks a field:

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

## Gyara

- **Raba long tasks** — yanke aiki gunduwa-gunduwa ka yield don input ya iya katsewa:

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

- **Matsar da manyan compute zuwa Web Worker** — kiyaye parsing/crunching daga main thread.
- **Debounce/throttle** handlers masu tsada; **virtualize** dogayen lists; memoize don yanke re-renders.
- **Jinkirta aiki mara gaggawa** da `requestIdleCallback` ko `scheduler.postTask` priorities.

## Me ya sa yake da muhimmanci

INP shi ne Core Web Vital mafi sabo kuma mafi wahalar gyarawa saboda yana game da *runtime*, ba load ba. Ana sa ran seniors su yi tunani daga single-threaded model — long tasks suna toshe input — kuma su kai ga yielding, workers, da scheduling maimakon kawai "inganta code."

Babban model: main thread

Bincike

Gyara

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa