আপনি কীভাবে runtime jank, long task, এবং খারাপ INP নির্ণয় করেন?

Question

IT Interview Practice · Accepted Answer

Runtime jank আসে **main thread block করা long task** থেকে — সেই একক thread যা JS, layout, paint, ও input হ্যান্ডল করে। যখন একটি task খুব দীর্ঘ চলে, input প্রক্রিয়া করা যায় না, তাই 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 পর্যন্ত বিলম্ব পরিমাপ করে। এর তিনটি অংশ: **input delay** (click করার সময় main thread ব্যস্ত), **processing time** (আপনার handler), এবং **presentation delay** (পরে style/layout/paint)।

## নির্ণয়

- **Performance panel** (Chrome DevTools): একটি interaction record করুন, লাল-চিহ্নিত **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 });
```

## সমাধান

- **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 দিয়ে **জরুরি নয় এমন কাজ পিছিয়ে দিন**।

## এটি কেন গুরুত্বপূর্ণ

INP হলো সর্বনবীন Core Web Vital এবং ঠিক করা সবচেয়ে কঠিন কারণ এটি load নয়, *runtime* সম্পর্কে। Senior-দের প্রত্যাশা করা হয় single-threaded model থেকে যুক্তি করবেন — long task input block করে — এবং কেবল "code অপ্টিমাইজ করো"-এর বদলে yielding, worker, ও scheduling-এর দিকে ঝোঁকবেন।

মূল model: main thread

নির্ণয়

সমাধান

এটি কেন গুরুত্বপূর্ণ

সম্পর্কিত প্রশ্ন