runtime jank, long task-கள், மற்றும் மோசமான INP-ஐ எப்படி diagnose செய்வது?

Question

IT Interview Practice · Accepted Answer

Runtime jank, **main thread-ஐ block செய்யும் long task-களிலிருந்து** வருகிறது — JS, layout, paint, மற்றும் input-ஐ கையாளும் ஒற்றை thread. ஒரு 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 ஒரு பயனர் interaction-லிருந்து அடுத்த paint வரையிலான தாமதத்தை அளக்கிறது. இதற்கு மூன்று பகுதிகள் உள்ளன: **input delay** (நீங்கள் click செய்யும்போது main thread busy), **processing time** (உங்கள் handler), மற்றும் **presentation delay** (பிறகு style/layout/paint).

## Diagnosing

- **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 குறுக்கிடலாம்:

```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-களுடன் **அவசரமற்ற வேலையை defer செய்யுங்கள்**.

## இது ஏன் முக்கியம்

INP என்பது புதிய Core Web Vital மற்றும் சரிசெய்ய மிகவும் கடினமானது, ஏனெனில் இது load அல்ல, *runtime* பற்றியது. senior-கள் single-threaded model-லிருந்து reason செய்ய எதிர்பார்க்கப்படுகிறார்கள் — long task-கள் input-ஐ block செய்கின்றன — மேலும் வெறும் "code-ஐ optimize செய்" என்பதற்குப் பதிலாக yielding, worker-கள், மற்றும் scheduling-ஐ நாடுகிறார்கள்.

முக்கிய model: main thread

Diagnosing

Fix-கள்

இது ஏன் முக்கியம்

தொடர்புடைய கேள்விகள்