window.Worker の事

ブラウザでマルチスレッドプログラミングするためのworker

DOMのコンテキストで重いループ処理をすると描画が固まる

→ WebWorkerにやらせる

記事

SharedWorkerと対比して、DedicatedWorkerとも呼ばれる

というか、MozillaはServiceWorkerとSharedWorkerとDedicatedWorkerをまとめてWebWorkerと呼んでいる

DOMとworkerのやりとり

postMessageを使う

基本的な使い方

この記事がわかりやすい

DOM(UIスレッド)側

const worker = new Worker('/path/to/worker.js') してインスタンス作る

worker.postMessage(data) でデータ送信

worker.onmessage(event) で結果を待ち受ける

worker側

global.onmessage = function (event) { } を宣言しておいてデータ待ち受け

postMessage(result) で結果を返すだけ

データのserialize/deserializeは勝手にやってくれる

参照渡しではなく完全にコピーされる

どこまで型を保ってくれるかは不明

とりあえずobject, Array, number, stringはそのまま送れる

画像とかDOMとかは試してない

workerを置く場所は個別のファイル以外にも

HTML内に <script type="text/js-worker">workerのコード</script> で直書き

Base64 encodeして new Worker(base64string) で作る

なども可能

色々考えた結果、普通に個別のjsファイルにするのが一番良いと思った

UIスレッドの事を気にせずに巨大なループを回せるので便利

分業ができる

serverはなるべくCPU使わずDBデータそのままJSONで返す

clientのCPUでJSON加工して辞書とか作る