Javascript Web Workers Offload Cpu Heavy Main Thread Postmessage

Definisi

Web Worker menjalankan script di thread terpisah dari UI utama, sehingga komputasi berat (parsing besar, kripto, image processing) tidak membekukan halaman. Komunikasi lewat postMessage / onmessage (structured clone).

Kapan dipakai

Pakai saat ada tugas CPU-intensive yang bikin UI lag (di atas ~50ms). Hindari untuk I/O murni (fetch sudah async di main thread) atau DOM manipulation (worker tak punya DOM).

Cara kerja

Buat worker

js

// main.js
const w = new Worker('worker.js');
w.postMessage({ type: 'start', n: 1e7 });
w.onmessage = (e) => console.log('hasil', e.data);
 
// worker.js
onmessage = (e) => {
  if (e.data.type === 'start') {
    const r = heavyCompute(e.data.n);
    postMessage(r);
  }
};

Struktur alur

Catatan implementasi

• Worker tak punya akses window, document, localStorage — hanya self, fetch, importScripts.
• Data dikirim lewat structured clone (sama seperti structuredClone); bukan shared memory default.
• worker.terminate() untuk hentikan; jangan biarkan jalan terus.
• Module worker: new Worker('w.js', { type: 'module' }) untuk import di dalam.

Kesalahan umum

• Akses DOM di worker: error; kirim hasil ke main lalu render di sana.
• Worker tak di-terminate: leak thread.
• Kirim fungsi lewat postMessage: tidak bisa (hanya data serialisable).
• Over-worker: untuk tugas kecil malah overhead message.

Referensi terkait

• JavaScript Event Loop, Promise, async/await
• JavaScript structuredClone vs JSON: Deep Copy
• Go Concurrency: Goroutines, Channels, Select