Digital Transformation
Event Loop (Mekanisme Asinkron JavaScript)
TL;DR: Event Loop adalah mekanisme inti runtime JavaScript yang mengatur urutan eksekusi kode sinkron, microtask seperti
Promise, dan task asinkron sepertisetTimeout. Pemahaman event loop penting karena setiap blok main thread berdampak langsung ke skor INP dan pengalaman interaksi pengguna.
Apa itu Event Loop?
Event Loop adalah algoritma yang dipakai JavaScript untuk menangani banyak hal seolah berbarengan padahal hanya punya satu thread eksekusi. Cara kerjanya: kode sinkron dijalankan dulu di call stack, lalu microtask antrian diproses sampai habis, baru task antrian diambil satu per satu. Setiap putaran loop akan render frame baru jika browser butuh repaint. Pola ini sudah jadi standar V8, JavaScriptCore, dan SpiderMonkey, jadi perilakunya konsisten di browser modern.
Analogi sederhananya: bayangkan kasir tunggal di minimarket. Pembeli yang sudah di depan kasir adalah call stack. Antrian kasir untuk transaksi cepat seperti scan kupon adalah microtask. Antrian troli besar adalah task. Kasir hanya layani satu pembeli pada satu waktu, tapi pintar mengatur prioritas.
Komponen Utama
| Komponen | Contoh | Prioritas |
|---|---|---|
| Call Stack | Eksekusi fungsi sinkron | Tertinggi |
| Microtask Queue | Promise.then, queueMicrotask, MutationObserver | Diproses habis sebelum task |
| Task Queue (Macrotask) | setTimeout, setInterval, event handler | Satu per loop |
| Render | Layout, paint | Setelah microtask, sebelum task baru |
Penting: jika sebuah fungsi sinkron berjalan terlalu lama (long task lebih dari 50 ms), browser tidak bisa render frame baru atau merespons input pengguna. Inilah penyebab utama skor INP jelek dan dead click.
Kenapa Penting untuk Marketer dan Developer?
Marketer mungkin tidak menulis JavaScript langsung, tapi memilih library berat (chat widget, tracker, A/B tester) yang memblokir main thread berdampak ke konversi. Dalam beberapa proyek terakhir, saya menemukan single third-party script yang menambahkan long task 300-500 ms saat halaman load, cukup untuk menurunkan skor INP dari "good" ke "needs improvement". Audit reguler dengan Chrome DevTools Performance panel jadi praktik wajib.
Pertanyaan Umum
Apakah JavaScript benar-benar single-threaded?
Main thread JavaScript single-threaded, tapi browser punya thread terpisah untuk network, audio, dan Web Worker. Pekerjaan berat bisa dipindah ke Web Worker supaya main thread tetap lega.
Apakah async/await lebih cepat dari Promise.then?
Tidak inheren lebih cepat. Keduanya pakai mekanisme microtask yang sama. Perbedaan utama adalah keterbacaan kode.
Bagaimana cara hindari main thread block?
Pecah pekerjaan berat dengan setTimeout(0), gunakan Web Worker untuk komputasi berat, dan debounce input handler. Detail teknis bisa dilihat di dokumentasi web.dev.
Istilah Terkait