Unavyo-diagnose runtime jank, long tasks, na INP mbaya?

Question

IT Interview Practice · Accepted Answer

Runtime jank hutokana na **long tasks zinazozuia main thread** — thread pekee inayoshughulikia JS, layout, paint, na input. Wakati task inaendesha kwa muda mrefu mno, input haiwezi kushughulikiwa, hivyo interactions hujisikia zimeganda na **INP** hupanda.

## Mental model kuu: 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 hupima ucheleweshaji kutoka interaction ya mtumiaji hadi paint ijayo. Ina sehemu tatu: **input delay** (main thread ina shughuli unapobonyeza), **processing time** (handler yako), na **presentation delay** (style/layout/paint baada).

## Kufanya diagnose

- **Performance panel** (Chrome DevTools): rekodi interaction, tafuta **Long Tasks** zilizowekwa alama nyekundu (>50ms) na handler frames pana.
- **PerformanceObserver** kunasa long tasks kwenye 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 });
```

## Marekebisho

- **Vunja long tasks** — gawa kazi vipande na yield ili input iweze kukatiza:

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

- **Hamisha compute nzito kwa Web Worker** — weka parsing/kukokotoa nje ya main thread.
- **Debounce/throttle** handlers za gharama kubwa; **virtualize** lists ndefu; memoize kupunguza re-renders.
- **Ahirisha kazi isiyo ya haraka** kwa `requestIdleCallback` au priorities za `scheduler.postTask`.

## Kwa nini ni muhimu

INP ndiyo Core Web Vital mpya zaidi na ngumu zaidi kurekebisha kwa sababu inahusu *runtime*, si load. Seniors hutarajiwa kufikiri kutoka kwa mfumo wa single-threaded — long tasks huzuia input — na kufikia yielding, workers, na scheduling badala ya "boresha tu code."

Mental model kuu: main thread

Kufanya diagnose

Marekebisho

Kwa nini ni muhimu

Maswali yanayohusiana