คุณจะวินิจฉัย runtime jank, long task, และ INP ที่แย่ได้อย่างไร?

Question

IT Interview Practice · Accepted Answer

Runtime jank มาจาก **long task ที่บล็อก main thread** — thread เดียวที่จัดการ JS, layout, paint, และ input เมื่อ task รันนานเกินไป input จะถูกประมวลผลไม่ได้ ทำให้การโต้ตอบรู้สึกค้าง และ **INP** พุ่งสูงขึ้น

## โมเดลแกนกลาง: 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 วัดความล่าช้าตั้งแต่การโต้ตอบของผู้ใช้ไปจนถึงการ paint ครั้งถัดไป มันมีสามส่วน: **input delay** (main thread ยุ่งอยู่ตอนคุณคลิก), **processing time** (handler ของคุณ), และ **presentation delay** (style/layout/paint หลังจากนั้น)

## การวินิจฉัย

- **Performance panel** (Chrome DevTools): บันทึกการโต้ตอบ มองหา **Long Task** ที่ถูกทำเครื่องหมายแดง (>50ms) และเฟรม handler ที่กว้าง
- **PerformanceObserver** เพื่อดัก long task ใน field:

```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 ออก** — แบ่งงานเป็นชิ้นและ 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));
```

- **ย้ายการคำนวณหนักไปยัง Web Worker** — เก็บการ parse/คำนวณให้อยู่นอก main thread
- **Debounce/throttle** handler ที่แพง; **virtualize** list ที่ยาว; memoize เพื่อลดการ re-render
- **เลื่อนงานที่ไม่เร่งด่วน** ด้วย `requestIdleCallback` หรือ priority ของ `scheduler.postTask`

## ทำไมจึงสำคัญ

INP คือ Core Web Vital ตัวใหม่ล่าสุดและแก้ยากที่สุดเพราะมันเกี่ยวกับ *runtime* ไม่ใช่การโหลด senior ถูกคาดหวังให้ให้เหตุผลจากโมเดล single-threaded — long task บล็อก input — และเลือกใช้การ yield, worker, และ scheduling แทนที่จะแค่ "optimize the code"

โมเดลแกนกลาง: main thread

การวินิจฉัย

การแก้ไข

ทำไมจึงสำคัญ

คำถามที่เกี่ยวข้อง