Si e diagnostikoni jank-un e runtime-it, long task-et dhe INP-në e dobët?

Question

IT Interview Practice · Accepted Answer

Jank-u i runtime-it vjen nga **long task-et që bllokojnë main thread-in** — thread-i i vetëm që trajton JS, layout, paint dhe input. Kur një task ekzekutohet shumë gjatë, input-i nuk mund të përpunohet, kështu që interaksionet ndihen të ngrira dhe **INP** ngjitet.

## Modeli bazë: main thread-i

```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 mat vonesën nga një interaksion i përdoruesit deri te paint-i tjetër. Ka tri pjesë: **input delay** (main thread i zënë kur klikoni), **processing time** (handler-i juaj) dhe **presentation delay** (style/layout/paint më pas).

## Diagnostikimi

- **Performance panel** (Chrome DevTools): regjistroni një interaksion, kërkoni **Long Tasks** të shënuar me të kuqe (>50ms) dhe frame handler-ash të gjerë.
- **PerformanceObserver** për të kapur long task-et në 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 });
```

## Rregullime

- **Thyeni long task-et** — copëtoni punën dhe bëni yield që input-i të mund të ndërhyjë:

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

- **Zhvendosni llogaritjen e rëndë te një Web Worker** — mbani parse-imin/përpunimin jashtë main thread-it.
- **Debounce/throttle** te handler-at e kushtueshëm; **virtualizoni** listat e gjata; memoizoni për të prerë ri-render-et.
- **Shtyni punën jo-urgjente** me `requestIdleCallback` ose prioritetet `scheduler.postTask`.

## Pse ka rëndësi

INP është Core Web Vital-i më i ri dhe më i vështiri për t'u rregulluar sepse ka të bëjë me *runtime*, jo me ngarkim. Senior-ët pritet të arsyetojnë nga modeli me një thread — long task-et bllokojnë input-in — dhe të kapin yielding, worker-a dhe scheduling në vend që thjesht "optimizo kodin."

Modeli bazë: main thread-i

Diagnostikimi

Rregullime

Pse ka rëndësi

Pyetje të ngjashme