Web Worker 是什麼? 可以用在哪?

為什麼需要 Web Worker？

JavaScript 是單執行緒語言，所有 JS 執行、DOM 操作、頁面渲染都在主執行緒（Main Thread） 上進行。如果一段 JS 需要長時間運算，會阻塞主執行緒，導致頁面卡頓、無法回應使用者操作。

Web Worker 讓你在背景執行緒上執行 JS，不阻塞主執行緒。

Web Worker 的特性

• 在獨立的背景執行緒執行，與主執行緒並行
• 無法存取 DOM（document、window 等）
• 與主執行緒透過 postMessage / onmessage 傳遞訊息（結構化複製）
• 可使用：fetch、indexedDB、console、setTimeout、WebSocket、Crypto 等

基本用法

主執行緒（main.js）

const worker = new Worker('worker.js');

// 傳訊息給 worker
worker.postMessage({ data: [1, 2, 3, 4, 5] });

// 接收 worker 的計算結果
worker.onmessage = (e) => {
  console.log('Worker 回傳：', e.data);
};

worker.onerror = (e) => {
  console.error('Worker 錯誤：', e.message);
};

Worker 執行緒（worker.js）

self.onmessage = (e) => {
  const result = heavyCompute(e.data.data);
  self.postMessage(result);
};

function heavyCompute(arr) {
  return arr.reduce((acc, n) => acc + n * n, 0);
}

Inline Worker（不需要獨立檔案）

const blob = new Blob([`
  self.onmessage = (e) => {
    self.postMessage(e.data * 2);
  };
`], { type: 'application/javascript' });

const worker = new Worker(URL.createObjectURL(blob));
worker.postMessage(21);
worker.onmessage = (e) => console.log(e.data); // 42

常見應用場景

場景	說明
大量計算	加密/解密、影像處理、矩陣運算
資料解析	CSV / JSON 大檔解析
WebAssembly	搭配 WASM 做高效能運算
背景同步	配合 Service Worker 做離線同步
即時資料處理	WebSocket 資料流處理、圖表更新

Web Worker 的種類

類型	說明
Dedicated Worker	一對一，只服務建立它的頁面
Shared Worker	可被多個頁面共享（同源）
Service Worker	特殊 Worker，用於快取攔截、推播通知、離線支援

注意事項

• 傳遞資料是複製（預設 structured clone），大物件可改用 Transferable Objects 達到零拷貝（如 ArrayBuffer）
• Worker 執行完後要呼叫 worker.terminate() 終止，避免資源洩漏
• 不支援同步 API（如 localStorage）