તમે runtime jank, long task, અને નબળા INP નું નિદાન કેવી રીતે કરો છો?

Question

IT Interview Practice · Accepted Answer

Runtime jank એ **main thread ને block કરતા long task** થી આવે છે — એ એકમાત્ર thread જે JS, layout, paint, અને input સંભાળે છે. જ્યારે task ખૂબ લાંબો ચાલે, ત્યારે input process થઈ શકતું નથી, તેથી interaction થીજી ગયેલા લાગે છે અને **INP** ચઢે છે.

## મુખ્ય 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 એ user interaction થી next paint સુધીના વિલંબને માપે છે. તેના ત્રણ ભાગ છે: **input delay** (click કરો ત્યારે main thread વ્યસ્ત), **processing time** (તમારો handler), અને **presentation delay** (પછીનું style/layout/paint).

## નિદાન

- **Performance panel** (Chrome DevTools): interaction record કરો, red-flag થયેલા **Long Task** (>50ms) અને પહોળા handler frame શોધો.
- field માં long task પકડવા **PerformanceObserver**:

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

## Fix

- **long task ને તોડો** — કામને chunk કરો અને yield કરો જેથી input interrupt કરી શકે:

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

- **ભારે compute ને Web Worker માં ખસેડો** — parsing/crunching ને main thread થી દૂર રાખો.
- ખર્ચાળ handler ને **debounce/throttle** કરો; લાંબા list ને **virtualize** કરો; re-render ઘટાડવા memoize કરો.
- `requestIdleCallback` કે `scheduler.postTask` priority સાથે **બિન-તાત્કાલિક કામ મુલતવી રાખો**.

## આ શા માટે મહત્વનું છે

INP એ સૌથી નવું Core Web Vital છે અને ઠીક કરવા સૌથી કઠિન કારણ કે તે load નહીં પણ *runtime* વિશે છે. Senior પાસેથી અપેક્ષા છે કે તેઓ single-threaded model થી તર્ક કરે — long task input ને block કરે છે — અને માત્ર "code optimize કરો" ને બદલે yielding, worker, અને scheduling તરફ વળે.

મુખ્ય model: main thread

નિદાન

Fix

આ શા માટે મહત્વનું છે

સંબંધિત પ્રશ્નો