Kif tiddjanjostika runtime jank, long tasks, u INP ħażin?

Question

IT Interview Practice · Accepted Answer

Ir-runtime jank ġej minn **long tasks li jimblokkaw il-main thread** — l-uniku thread li jimmaniġġja l-JS, il-layout, il-paint, u l-input. Meta task jaħdem għal wisq żmien, l-input ma jistax jiġi pproċessat, u għalhekk l-interazzjonijiet iħossuhom iffriżati u l-**INP** jitla'.

## Il-mudell ewlieni: il-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 ikejjel id-dewmien minn interazzjoni tal-utent sal-paint li jmiss. Għandu tliet partijiet: **input delay** (il-main thread okkupat meta tikklikkja), **processing time** (il-handler tiegħek), u **presentation delay** (style/layout/paint wara).

## Djanjożi

- **Performance panel** (Chrome DevTools): irrekordja interazzjoni, fittex **Long Tasks** immarkati bl-aħmar (>50ms) u handler frames wesgħin.
- **PerformanceObserver** biex taqbad long tasks fil-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 });
```

## Fixes

- **Kisser il-long tasks** — aqsam ix-xogħol f'chunks u agħmel yield biex l-input ikun jista' jinterrompi:

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

- **Mexxi kalkoli tqal għal Web Worker** — żomm l-ipparsjar/il-kalkolu barra mill-main thread.
- **Debounce/throttle** handlers għaljin; **virtwalizza** listi twal; memoize biex tnaqqas ir-re-renders.
- **Ipposponi xogħol mhux urġenti** b'`requestIdleCallback` jew il-prijoritajiet ta' `scheduler.postTask`.

## Għaliex huwa importanti

INP huwa l-aktar Core Web Vital ġdid u l-aktar diffiċli biex tirranġa għax jirrigwarda r-*runtime*, mhux it-tagħbija. Mis-seniors huwa mistenni li jirraġunaw mill-mudell single-threaded — long tasks jimblokkaw l-input — u jmorru għal yielding, workers, u scheduling minflok biss "ottimizza l-kodiċi".

Il-mudell ewlieni: il-main thread

Djanjożi

Fixes

Għaliex huwa importanti

Mistoqsijiet relatati