Bagaimana anda mendiagnos jank run-time, long task, dan INP yang lemah?

Question

IT Interview Practice · Accepted Answer

Jank run-time datang daripada **long task yang menyekat main thread** — thread tunggal yang mengendalikan JS, layout, paint, dan input. Apabila sesuatu task berjalan terlalu lama, input tidak dapat diproses, jadi interaksi terasa beku dan **INP** memanjat.

## Model teras: main thread

```text
Main thread: [ event handler 180ms ]  input beratur... dirender ─▶ INP = masa sehingga paint seterusnya
             └── suatu "long task" (>50ms) menyekat segala-galanya, termasuk bertindak balas kepada klik
```

INP mengukur lengah dari interaksi pengguna ke paint seterusnya. Ia mempunyai tiga bahagian: **input delay** (main thread sibuk semasa anda klik), **processing time** (handler anda), dan **presentation delay** (style/layout/paint selepasnya).

## Mendiagnos

- **Panel Performance** (Chrome DevTools): rakam sesuatu interaksi, cari **Long Task** yang ditanda-merah (>50ms) dan bingkai handler yang lebar.
- **PerformanceObserver** untuk menangkap long task di lapangan:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // cari penyekat pengguna-sebenar
  }
}).observe({ type: "longtask", buffered: true });
```

## Pembetulan

- **Pecahkan long task** — bahagikan kerja dan mengalah (yield) supaya input boleh mengganggu:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // benarkan klik lalu
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Alihkan pengiraan berat ke Web Worker** — kekalkan penghuraian/pengiraan-berat di luar main thread.
- **Debounce/throttle** handler yang mahal; **virtualize** list yang panjang; memoize untuk memotong render-semula.
- **Tangguhkan kerja tidak-mendesak** dengan `requestIdleCallback` atau keutamaan `scheduler.postTask`.

## Mengapa ia penting

INP ialah Core Web Vital terbaharu dan yang paling sukar dibetulkan kerana ia berkenaan *run-time*, bukan pemuatan. Senior dijangka menaakul dari model thread-tunggal — long task menyekat input — dan mencapai yielding, worker, dan penjadualan dan bukannya sekadar "optimumkan kod."

Model teras: main thread

Mendiagnos

Pembetulan

Mengapa ia penting

Soalan berkaitan