runtime jank, long tasks, आणि खराब INP चे निदान तुम्ही कसे करता?

Question

IT Interview Practice · Accepted Answer

Runtime jank **main thread block करणाऱ्या long tasks** मधून येते — तो एकमेव thread जो JS, layout, paint, आणि input हाताळतो. एखादे task खूप वेळ चालल्यास, input process होऊ शकत नाही, त्यामुळे interactions गोठल्यासारखे वाटतात आणि **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 वापरकर्ता interaction पासून next paint पर्यंतचा विलंब मोजते. त्याचे तीन भाग आहेत: **input delay** (तुम्ही click करता तेव्हा main thread व्यस्त), **processing time** (तुमचा handler), आणि **presentation delay** (नंतरचे style/layout/paint).

## निदान

- **Performance panel** (Chrome DevTools): एक interaction record करा, red-flagged **Long Tasks** (>50ms) आणि रुंद handler frames शोधा.
- field मध्ये long tasks पकडण्यासाठी **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 });
```

## Fixes

- **long tasks मोडा** — काम chunk करा आणि yield करा जेणेकरून input व्यत्यय आणू शकेल:

```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 पासून दूर ठेवा.
- महागडे handlers **debounce/throttle** करा; लांब lists **virtualize** करा; re-renders कमी करण्यासाठी memoize करा.
- `requestIdleCallback` किंवा `scheduler.postTask` priorities सह **अत्यावश्यक नसलेले काम defer करा**.

## हे का महत्त्वाचे आहे

INP हे सर्वात नवे Core Web Vital आणि दुरुस्त करायला सर्वात कठीण आहे कारण ते load नव्हे तर *runtime* बद्दल आहे. Seniors कडून अपेक्षा असते की ते single-threaded model पासून तर्क करतील — long tasks input block करतात — आणि फक्त "code optimize करा" ऐवजी yielding, workers, आणि scheduling कडे वळतील.

मूळ model: main thread

निदान

Fixes

हे का महत्त्वाचे आहे

संबंधित प्रश्न