requestIdleCallback

TL;DR: requestIdleCallback adalah API JavaScript yang memberi tahu browser untuk menjalankan fungsi ketika ada waktu luang di main thread. Pola ini cocok untuk pekerjaan latar seperti analytics, prefetch, dan logging, sehingga interaksi pengguna tetap responsif dan metrik INP tetap terjaga.

Apa itu requestIdleCallback?

requestIdleCallback adalah Web API yang menerima fungsi callback dan menjalankannya saat browser sedang tidak sibuk merender atau menangani input. Callback menerima objek IdleDeadline yang berisi timeRemaining(), sehingga developer tahu berapa banyak waktu tersisa sebelum frame berikutnya. Pola ini menggeser tugas non-kritis ke jendela waktu yang tidak terlihat oleh pengguna.

Analogi sederhana: bayangkan resepsionis kantor yang baru menjawab email balasan ketika tidak ada tamu datang. Pekerjaan tetap selesai, tapi pelanggan utama tidak menunggu. Pola ini melengkapi optimasi main thread dan mengurangi long task.

Cara Pakai

Contoh: requestIdleCallback((deadline) => { while (deadline.timeRemaining() > 0 && queue.length) process(queue.pop()) }, { timeout: 2000 }). Opsi timeout mencegah callback tertunda terlalu lama. Detail lengkap ada di MDN requestIdleCallback.

Kenapa Penting?

Untuk marketer dan developer Indonesia yang menargetkan pengguna 3G dan 4G, setiap milidetik di main thread berdampak pada INP. Memindahkan logging, A/B test bucketing, dan warming cache ke requestIdleCallback membuat tap dan klik tetap responsif. React 18 ke atas juga memakai konsep yang sama melalui scheduler internalnya untuk concurrent rendering.

Pertanyaan Umum

Apakah requestIdleCallback didukung Safari?

Per 2026, Safari sudah mendukung sejak versi 16.4. Untuk versi lebih lama, pakai fallback setTimeout(fn, 1) agar tetap berjalan walau tanpa idle window.

Kapan harus dihindari?

Hindari untuk pekerjaan kritis yang harus selesai sebelum render berikutnya, misalnya animasi atau respons input. Untuk kasus itu pakai requestAnimationFrame atau event listener langsung.