Mengenal Web Workers: Cara Membuat JavaScript Mendukung Multithreading

Saat Event Loop Pun Menyerah

Kita tahu JavaScript memiliki arsitektur Asynchronous (seperti fetch dan setTimeout) yang ditangani oleh Event Loop untuk mencegah layar macet. TAPI, fitur *Async* itu hanya berlaku untuk Tugas Jaringan atau Waktu (I/O).

Bagaimana jika masalahnya adalah Komputasi CPU Berat (Matematika)? Misalnya: Kamu membuat fitur *Upload Foto*, lalu JavaScript di Frontend harus mengkompres/mengubah ukuran foto 10MB tersebut sebelum di-upload, atau *parsing* file Excel (CSV) yang berisi 100.000 baris. Karena pekerjaan berat ini tetap berada di jalur utama (Main Thread), layar *browser* pengunjung akan Macet Total (Freeze). Tombol tidak bisa diklik dan *scroll* akan mati selama 5 detik proses!

Penyelamat UI: Web Workers API

Untuk mengatasi kebuntuan ini, Browser modern menghadirkan fitur luar biasa bernama Web Workers. Web Worker mengizinkan JavaScript untuk menyewa "Otak Pekerja Baru" (Background Thread / Multithreading).

Cara Kerjanya:

Otak Utama (Main Thread) bertugas menjaga *User Interface* (HTML/Tombol) agar tetap mulus. Saat ada tugas memproses Excel 100.000 baris, Otak Utama akan melemparkan data tersebut ke Otak Pekerja (Web Worker) yang bersembunyi di belakang layar.

Selama Otak Pekerja berkeringat memproses data berat tersebut, Otak Utama tetap santai melayani klik dari *user*. Saat Pekerja selesai, ia akan "menelepon" Otak Utama memberikan hasilnya.

Sintaks Dasar Pembuatan Pekerja

Web Worker harus dipisahkan ke dalam file .js tersendiri (Misal: pekerja.js).

// 1. Di File utama (main.js)
const worker = new Worker('pekerja.js');

// Melempar data tugas ke pekerja
worker.postMessage(100000);

// Menunggu hasil pekerja selesai
worker.onmessage = function(event) {
  console.log("Hasil dari pekerja: ", event.data);
};

// -------------------------------------------

// 2. Di File pekerja (pekerja.js)
onmessage = function(event) {
  let batas = event.data;
  let hasilBerat = 0;
  
  // Proses Looping Matematika Sangat Berat
  for (let i = 0; i < batas; i++) { hasilBerat += i; }
  
  // Kembalikan hasilnya ke file utama!
  postMessage(hasilBerat);
};

Aturan Mutlak Web Workers

Karena pekerja ini berada di ruang isolasi memori yang berbeda (agar aman dan *thread-safe*), Web Workers DILARANG KERAS menyentuh DOM (HTML) atau memanggil objek window dan document. Ia murni hanya mesin penghitung (Kalkulator) yang menerima Input Data dan mengirim Output Data.