ਤੁਸੀਂ runtime jank, long tasks, ਅਤੇ ਮਾੜੇ INP ਦਾ diagnose ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

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 ਇੱਕ user interaction ਤੋਂ ਅਗਲੇ paint ਤੱਕ ਦੀ ਦੇਰੀ ਮਾਪਦਾ ਹੈ। ਇਸਦੇ ਤਿੰਨ ਹਿੱਸੇ ਹਨ: **input delay** (ਜਦੋਂ ਤੁਸੀਂ click ਕਰਦੇ ਹੋ ਤਾਂ main thread ਵਿਅਸਤ), **processing time** (ਤੁਹਾਡਾ handler), ਅਤੇ **presentation delay** (ਬਾਅਦ ਵਿੱਚ style/layout/paint)।

## Diagnosing

- **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 ਨਾਲ **ਗ਼ੈਰ-ਜ਼ਰੂਰੀ ਕੰਮ ਟਾਲੋ**।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

INP ਸਭ ਤੋਂ ਨਵਾਂ Core Web Vital ਹੈ ਅਤੇ ਠੀਕ ਕਰਨਾ ਸਭ ਤੋਂ ਔਖਾ ਹੈ ਕਿਉਂਕਿ ਇਹ *runtime* ਬਾਰੇ ਹੈ, load ਬਾਰੇ ਨਹੀਂ। Seniors ਤੋਂ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਉਹ single-threaded model ਤੋਂ ਤਰਕ ਕਰਨ — long tasks input ਨੂੰ block ਕਰਦੇ ਹਨ — ਅਤੇ ਸਿਰਫ਼ "code optimize ਕਰੋ" ਦੀ ਬਜਾਏ yielding, workers, ਅਤੇ scheduling ਵੱਲ ਵਧਣ।

ਮੁੱਖ model: main thread

Diagnosing

Fixes

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ