Web Workers — รัน JS บน background thread

Web Worker รัน JavaScript บน thread แยกต่างหาก ป้องกัน main thread (UI) ถูก block จาก heavy computation เช่น data processing, image manipulation, crypto

// worker.js — รันบน background thread
self.onmessage = (event) => {
  const { data } = event;
  // heavy work
  const result = data.numbers.reduce((sum, n) => sum + n, 0);
  self.postMessage({ result });
};

// main.js — UI thread
const worker = new Worker('./worker.js');

worker.postMessage({ numbers: Array.from({ length: 1e7 }, (_, i) => i) });

worker.onmessage = (event) => {
  console.log('Result:', event.data.result);
};

// cleanup
worker.terminate();

Shared Worker — share หนึ่ง worker กับหลาย tab:

const shared = new SharedWorker('./shared-worker.js');
shared.port.postMessage('hello');
shared.port.onmessage = (e) => console.log(e.data);

ข้อจำกัดของ Worker:

• ไม่มีสิทธิ์เข้าถึง DOM
• ไม่มี window object (แต่มี self)
• communicate ผ่าน postMessage เท่านั้น
• ข้อมูลที่ส่งถูก structured clone (copy ไม่ใช่ reference)

ส่งข้อมูลขนาดใหญ่โดยไม่ copy:

const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB
// transfer แทน clone — ทำให้ main thread ใช้งาน buffer ไม่ได้อีก
worker.postMessage({ buffer }, [buffer]);

เหมาะกับ: image processing, CSV parsing, crypto, WASM execution, large sort/filter