Web Worker

Web Worker とは

Web Worker は、ブラウザのメインスレッドとは別のバックグラウンドスレッドで JavaScript を実行する仕組みである。CPU 負荷の高い処理 (画像処理、暗号化、大量データのソート) をメインスレッドから分離し、UI のフリーズを防ぐ。

メインスレッドの問題

メインスレッドの問題を図で示す。

メインスレッド: [UI 描画] [イベント処理] [重い計算...........] [UI 描画]
                                          ↑ この間 UI がフリーズ

Web Worker:    [UI 描画] [イベント処理] [UI 描画] [UI 描画]
Worker スレッド:          [重い計算...........]
                          ↑ メインスレッドは自由

基本的な使い方

基本的な使い方のコード例を示す。

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));

worker.postMessage({ data: largeArray });

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

// worker.ts
self.onmessage = (event) => {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};

Worker の種類

Worker の種類を以下にまとめる。

種類	スコープ	用途
Dedicated Worker	1 つのページ	CPU 負荷の高い処理
Shared Worker	複数のページ間で共有	タブ間のデータ共有
Service Worker	オフライン対応	キャッシュ、プッシュ通知

Worker の制限

Worker の制限を以下にまとめる。

できること	できないこと
fetch	DOM 操作 (document, window)
setTimeout / setInterval	alert, confirm
IndexedDB	localStorage
WebSocket	UI の直接更新
crypto

Transferable Objects

大きなデータを Worker に渡す場合、コピーではなく所有権を移転 (transfer) して高速化する。

const buffer = new ArrayBuffer(1024 * 1024); // 1MB
worker.postMessage(buffer, [buffer]); // transfer (コピーなし)
// buffer は使えなくなる (所有権が Worker に移転)

使うべきケース

画像処理 (リサイズ、フィルター、WebP 変換)、データ処理 (CSV パース、大量データのソート)、暗号化 (ハッシュ計算、暗号化/復号)、構文解析 (Markdown → HTML、コードハイライト) が適している。

Node.js の Worker Threads との違い

Web Worker はブラウザ環境で Transferable のみのメモリ共有、Worker Threads は Node.js 環境で SharedArrayBuffer によるメモリ共有が可能。モジュールは Web Worker が ESM、Worker Threads が CommonJS / ESM に対応する。

理論と実装の両面から学ぶなら関連書籍が参考になる。