Chẩn đoán runtime jank, long task và INP kém thế nào?

Question

IT Interview Practice · Accepted Answer

Runtime jank đến từ **long task chặn main thread** — luồng đơn xử lý JS, layout, paint và input. Khi một task chạy quá lâu, input không được xử lý, nên tương tác thấy như bị đơ và **INP** tăng vọt.

## Mô hình cốt lõi: main thread

```text
Main thread: [ event handler 180ms ]  input xếp hàng... render ─▶ INP = thời gian tới paint kế
             └── một "long task" (>50ms) chặn mọi thứ, kể cả phản hồi cú click
```

INP đo độ trễ từ khi người dùng tương tác tới lần paint kế tiếp. Nó gồm ba phần: **input delay** (main thread bận lúc bạn click), **processing time** (handler của bạn), và **presentation delay** (style/layout/paint sau đó).

## Chẩn đoán

- **Performance panel** (Chrome DevTools): ghi lại một tương tác, tìm **Long Tasks** bị đánh dấu đỏ (>50ms) và các frame handler rộng.
- **PerformanceObserver** để bắt long task ở field:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // tìm thủ phạm chặn ở người dùng thật
  }
}).observe({ type: "longtask", buffered: true });
```

## Cách sửa

- **Chia nhỏ long task** — cắt công việc thành khối và nhường luồng để input chen vào được:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // cho click lọt qua
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Đưa tính toán nặng sang Web Worker** — giữ việc parse/tính toán khỏi main thread.
- **Debounce/throttle** các handler tốn kém; **virtualize** danh sách dài; memoize để giảm re-render.
- **Hoãn việc không gấp** bằng `requestIdleCallback` hoặc độ ưu tiên của `scheduler.postTask`.

## Tại sao điều này quan trọng

INP là Core Web Vital mới nhất và khó sửa nhất vì nó nói về *runtime*, không phải lúc tải. Senior được kỳ vọng lập luận từ mô hình luồng đơn — long task chặn input — và dùng tới yielding, worker và scheduling thay vì chỉ "tối ưu code".

Mô hình cốt lõi: main thread

Chẩn đoán

Cách sửa

Tại sao điều này quan trọng

Câu hỏi liên quan