Cara JavaScript Berjalan: Engine, Event Loop, Async · 4/9
Event loop
Satu thread, sebuah queue, dan sebuah loop. Inti dari semua hal non-blocking yang dilakukan JavaScript.
Baca 30 menit
Setelah pelajaran ini kamu bisa
- Menjelaskan bagaimana satu thread menangani banyak hal sekaligus
- Menyebutkan di mana pekerjaan asinkron sebenarnya terjadi
- Mengenali kode yang memblokir thread, dan menjelaskan akibatnya
- Menjelaskan kenapa loop lambat membekukan halaman tapi request jaringan lambat tidak
JavaScript menjalankan kodemu di satu thread. Satu hal pada satu waktu, selalu. Tapi sebuah halaman bisa mengunduh tiga gambar, menjalankan animasi, dan merespons klik-mu. Event loop adalah caranya.
Bagian-bagiannya
- Call stack — satu-satunya tempat kodemu benar-benar dieksekusi.
- API dari runtime — timer, jaringan, file system. Ini *bukan* JavaScript; ini C++ di browser atau Node, dan mereka benar-benar bisa bekerja paralel.
- Task queue — pekerjaan yang sudah selesai, menunggu callback-nya dijalankan.
- Event loop — sebuah loop yang bertanya: apakah stack kosong? Kalau ya, ambil task berikutnya dari queue dan jalankan.
Detail terakhir itu yang paling penting: event loop tidak bisa menyela kode yang sedang berjalan. Sebuah callback menunggu sampai stack benar-benar kosong. Tidak ada yang menyela function-mu di tengah jalan.
Timer nol milidetik tetap menunggu kode sinkronnya selesai. Tebak dulu urutannya.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Blocking
Blocking berarti menguasai thread sehingga tidak ada hal lain yang bisa jalan. Di browser itu membekukan halaman: tidak bisa diklik, tidak bisa di-scroll, animasi berhenti. Di server lebih buruk lagi — satu request memblokir request *semua pengguna lain*.
Timer dijadwalkan 5ms tapi datangnya jauh lebih lambat, karena loop yang sibuk menolak melepaskan thread.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
| Operasi | Memblokir thread? | Kenapa |
|---|---|---|
await fetch(url) | Tidak | Runtime yang menunggu; thread-mu dilepaskan |
| Loop atas sejuta item | Ya | Itu kodemu, di thread-mu |
JSON.parse string raksasa | Ya | Sinkron, secepat apa pun ia |
readFileSync | Ya | Akhiran Sync itu peringatannya |
await readFile | Tidak | Diserahkan ke runtime |
Hashing bcrypt sinkron | Ya | Kerja CPU yang sengaja dibuat lambat |
Tugas praktik
Di console browser pada halaman apa pun, jalankan const t = Date.now(); while (Date.now() - t < 4000) {} lalu coba scroll atau klik selama itu berjalan. Tidak ada yang merespons. Itulah thread yang terblokir, dan itulah yang dialami penggunamu saat sebuah handler mengerjakan terlalu banyak hal secara sinkron.
Hasil yang diharapkan
Halamannya benar-benar beku selama empat detik.