آپ 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 سے اگلے 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 تلاش کریں۔
- **PerformanceObserver** سے field میں long tasks پکڑنے کے لیے:

```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 سے دور رکھیں۔
- **Debounce/throttle** مہنگے handlers کو؛ لمبی lists کو **virtualize** کریں؛ re-renders کم کرنے کے لیے memoize کریں۔
- **غیر فوری کام کو ملتوی کریں** `requestIdleCallback` یا `scheduler.postTask` priorities کے ساتھ۔

## یہ کیوں اہم ہے

INP سب سے نیا Core Web Vital اور ٹھیک کرنے میں سب سے مشکل ہے کیونکہ یہ *runtime* کے بارے میں ہے، load کے نہیں۔ Seniors سے توقع کی جاتی ہے کہ وہ single-threaded model سے دلیل دیں — long tasks input کو block کرتے ہیں — اور محض "code کو optimize کرو" کے بجائے yielding، workers، اور scheduling کی طرف بڑھیں۔

بنیادی model: main thread

تشخیص

Fixes

یہ کیوں اہم ہے

متعلقہ سوالات