Kloning Otak Kanan: Web Workers (Multithreading)
Kita ingat di Topik 18 bahwa JavaScript adalah bahasa Single-Thread (Hanya punya 1 tangan).
Bayangkan jika tangan satu-satunya itu disuruh menghitung rumus Fisika Quantum bernilai 5 Miliar loop. Apa
yang terjadi? Ya, **Seluruh Layar Website akan Macet Berhenti Total (Nge-Lag/Freeze)**. *User* tidak bisa
mengeklik apapun, apalagi sekadar *scroll* layar sampai perhitungan itu selesai 10 detik kemudian.
Untuk pekerjaan raksasa seperti merender Grafik 3D Bumi atau mengolah ratusan MB File Excel, JavaScript
butuh Kloning Tangan. Selamat datang di Web Workers API! Ini adalah cara JavaScript
menciptakan "Pekerja Bayangan" di *Background* (*Multithreading*), sehingga Animasi UI Layarmu tetap lancar
mengalir bak air sementara si Pekerja Lembur setengah mati menghitung rumus di balik layar!
📬 1. Sistem Pos Pesan (PostMessage)
Karena Web Worker adalah sebuah *Proses Latar Belakang* yang hidup terisolasi di "Dimensi Lain", ia
TIDAK BISA SETUH HTML/DOM (Murni Buta Visual). Ia hanya bisa menerima data Mentah. Cara kita
berbicara dengannya adalah lewat "Kotak Surat / Telegram" menggunakan perintah postMessage().
Sebuah Web Worker yang asli WAJIB dipanggil dari File ( .js ) yang Terpisah dari file *script*
Utamamu. Mari kita lihat kedua skrip ini berdampingan.
1. File Utama (app.js) - Sang Mandor
// 1. Panggil Kuli Bangunan dari file beda
const kuliA = new Worker('pekerja.js');
// 2. Menyuruh Kerja (Kirim Pesan Telegram)
console.log("Mandor: Tolong hitung gaji 5000 karyawan.");
kuliA.postMessage("TOLONG_HITUNG_BERAT");
// 3. Kapan pun selesai, dengerin Balasannya!
kuliA.onmessage = function(suratDariKuli) {
console.log("Mandor: Oh udah selesai!");
// INI HASILNYA (Masuk sbg property .data)
console.log( suratDariKuli.data );
};
2. File Pekerja (pekerja.js) - Sang Kuli
// 1. Menunggu HP Bunyi (Pesan Masuk dari Mandor)
self.onmessage = function(suratDariMandor) {
// Mengecek apa isi pesannya?
if (suratDariMandor.data === "TOLONG_HITUNG_BERAT") {
let totalGaji = 0;
// ⚙️ Melakukan pekerjaan BERAT BANGET 1 Milyar Loop
// (TIDAK AKAN MEMBUAT HP USER NGE-LAG!)
for(let i = 0; i < 1000000000; i++) {
totalGaji += i;
}
// 2. Lapor Selesai! (Kirim Kembali Hasilnya)
self.postMessage("Boss, ini totalnya:" + totalGaji);
}
};
🌪️ 2. Studi Kasus Mahakarya: Menghindari Kiamat Layar Macet
Kita akan menyimulasikan "Kejadian Kiamat Freeze". Di bawah ini ada Piring Hitam (Gear) yang terus-menerus
berputar berkat Animasi CSS murni tiada henti.
1. Tombol pertama ("Jalur Utama") akan menyuruh JavaScript menghitung 3 Miliar Looping Gila
langsung di dalam *Thread* Utama. Coba klik dan rasakan bahwa layar & Animasi Putaranmu patah berhenti!.
2. Tombol kedua ("Jalur Pekerja Rahasia / Worker") akan memerintahkan pekerja bawah tanah untuk menghitung
tugas 3 Milyar yang SAMA PERSIS. Coba klik, dan Animation Gear kamu tidak akan berhenti 1 milidetik pun
bersenandung layaknya dewa!
🎯 Demo Live:
Perhatikan Laju Animasi Roda Gigi
⚙️
Layar akan menunggu perintahmu...
Layar akan menunggu perintahmu...
Ini adalah konsep terhebat dalam Frontend Engineering! Melimpahkan tugas berat seperti Kalkulasi Excel,
Image Processing Canvas, atau filter data berukuran ratusan MB selalu harus diputar di ranah
Web Workers supaya *Thread* utama JS bisa tetap mulus bernapas merender Layar UI tanpa
nge-Freeze.