WebWorker
window.Workerの事
DOMのコンテキストで重いループ処理をすると描画が固まる
→ WebWorkerにやらせる
記事
DOMとworkerのやりとり
基本的な使い方
この記事がわかりやすいshokai.icon
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はそのまま送れるshokai.icon
画像とかDOMとかは試してない
workerを置く場所は個別のファイル以外にも
HTML内に<script type="text/js-worker">workerのコード</script>で直書き
Base64 encodeしてnew Worker(base64string)で作る
なども可能
色々考えた結果、普通に個別のjsファイルにするのが一番良いと思ったshokai.icon
UIスレッドの事を気にせずに巨大なループを回せるので便利shokai.icon
分業ができる
serverはなるべくCPU使わずDBデータそのままJSONで返す
clientのCPUでJSON加工して辞書とか作る