👷
Web Workers — JavaScriptでマルチスレッドを使う方法
postMessageの構造化複製（Structured Clone）とSharedArrayBuffer
JavaScriptはシングルスレッド。メインスレッドで重い計算するとUIが止まる。Web Workerがこれを解決。
postMessageのデータ転送方式
構造化複製（デフォルト）：ディープコピー。1GB配列＝1GBコピーコスト。
Transferable Objects：所有権移転。コピーなし、ただし元は使用不可に。
SharedArrayBuffer：共有メモリ。両スレッドが同じメモリに同時アクセス。Atomics APIで同期。COOP/COEPヘッダー必要。
DOMアクセス不可
Workerではdocument、windowがない。UI操作はpostMessageで結果をメインに送って処理。
TooscutがWorkerを使う理由
先述のTooscut映像エディタがOffscreenCanvasをWorkerにtransferし、Worker内でWASMコンポジターでWebGPUレンダリングするのがまさにこのパターン。
キーポイント
1
new Worker("worker.js")で別スレッド生成
2
postMessageでデータ送信 — 構造化複製（デフォルト）またはTransferable（所有権移転）
3
Workerで計算後postMessageで結果返却
4
SharedArrayBufferで共有メモリ — Atomicsで同期（COOP/COEP必須）
ユースケース
画像処理 — リサイズ/フィルターをWorkerで実行しUIが止まらないように
WASM推論 — AIモデル推論をWorkerで実行（background-removal-jsパターン）