Bagaimana kamu mendiagnosis jank runtime, long task, dan INP yang buruk?

Question

IT Interview Practice · Accepted Answer

Jank runtime datang dari **long task yang memblokir main thread** — thread tunggal yang menangani JS, layout, paint, dan input. Ketika sebuah task berjalan terlalu lama, input tidak bisa diproses, sehingga interaksi terasa membeku dan **INP** naik.

## Model inti: main thread

```text
Main thread: [ event handler 180ms ]  input mengantre... dirender ─▶ INP = waktu hingga paint berikutnya
             └── sebuah "long task" (>50ms) memblokir segalanya, termasuk merespons klik
```

INP mengukur jeda dari interaksi pengguna hingga paint berikutnya. Ia memiliki tiga bagian: **input delay** (main thread sibuk saat kamu klik), **processing time** (handler-mu), dan **presentation delay** (style/layout/paint sesudahnya).

## Mendiagnosis

- **Panel Performance** (Chrome DevTools): rekam sebuah interaksi, cari **Long Task** yang ditandai merah (>50ms) dan frame handler yang lebar.
- **PerformanceObserver** untuk menangkap long task di field:

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

## Perbaikan

- **Pecah long task** — potong pekerjaan menjadi bagian dan yield agar input bisa menyela:

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

- **Pindahkan komputasi berat ke Web Worker** — jaga parsing/perhitungan tetap di luar main thread.
- **Debounce/throttle** handler yang mahal; **virtualisasikan** list panjang; memoize untuk memangkas render ulang.
- **Tunda pekerjaan tidak mendesak** dengan prioritas `requestIdleCallback` atau `scheduler.postTask`.

## Mengapa ini penting

INP adalah Core Web Vital terbaru dan yang paling sulit diperbaiki karena ia tentang *runtime*, bukan load. Senior diharapkan menalar dari model single-threaded — long task memblokir input — dan meraih yielding, worker, dan scheduling alih-alih sekadar "optimalkan kodenya".

Model inti: main thread

Mendiagnosis

Perbaikan

Mengapa ini penting

Pertanyaan terkait