Runtime jank, long task లు, మరియు పేలవమైన INP ను ఎలా diagnose చేస్తారు?

Question

IT Interview Practice · Accepted Answer

Runtime jank **main thread ను block చేసే long task ల** నుండి వస్తుంది — JS, layout, paint, మరియు input ను handle చేసే ఏకైక thread. ఒక task చాలా సేపు run అయినప్పుడు, 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 నుండి తదుపరి paint వరకు delay ను కొలుస్తుంది. దీనికి మూడు భాగాలు ఉన్నాయి: **input delay** (మీరు click చేసినప్పుడు main thread busy), **processing time** (మీ handler), మరియు **presentation delay** (తర్వాత style/layout/paint).

## Diagnosing

- **Performance panel** (Chrome DevTools): ఒక interaction ను record చేయండి, red-flagged **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 నుండి దూరంగా ఉంచండి.
- **Debounce/throttle** ఖరీదైన handler లను; పొడవైన list లను **virtualize** చేయండి; re-render లను తగ్గించడానికి memoize చేయండి.
- `requestIdleCallback` లేదా `scheduler.postTask` priority లతో **అత్యవసరం కాని పనిని వాయిదా వేయండి**.

## ఇది ఎందుకు ముఖ్యం

INP అనేది కొత్త Core Web Vital మరియు fix చేయడానికి అత్యంత కష్టమైనది ఎందుకంటే ఇది load కాదు, *runtime* గురించి. Senior లు ఏకైక-threaded model నుండి తర్కించాలని — long task లు input ను block చేస్తాయి — మరియు కేవలం "code ను optimize చేయి" కంటే yielding, worker లు, మరియు scheduling వైపు reach అవాలని ఆశించబడతారు.

కీలక model: main thread

Diagnosing

Fix లు

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు