WebWorkerを使う

重い処理を別スレッドにまかせ、メインスレッドを軽くする

使い方

• 別スレッドで動くjsファイルを別で定義する
• webpack等を使ってる場合はエントリーポイントをメイン以外にも用意し、webworker用のjsを書き出せるようにする

メインスレッド

• postMessageで別スレッドにデータ送信
• onmessageで別スレッドの計算結果を取得する

this.worker = new Worker('./js/webworker.js');

// Workerにメッセージを送信
this.worker.postMessage({data:"hogehoge"});

// Workerからのメッセージを受信
this.worker.onmessage = (e)=> {
this.data = e.data;
};

別スレッド

• onmessageでデータ受信
• postMessageでメインスレッドに送信
• onmessageのタイミングでpostMessageする必要はなく、setIntervalで毎回データを送るなども可能

import { Particles } from "../particles/Particles";
import { RectData } from "../rects/RectData";

let isInit = false;

onmessage = function(event) {
  
  if(!isInit){
    //初期化する
    isInit = true;
    console.log("init",event.data);
  }

  setInterval(() => {
      postMessage({data:"fuga"});  
  }, 1000/30);

};

注意

• 別スレッドだとdomが使えないので、既存のjsを移植する時、気をつける
• document等、宣言されてない変数にアクセスするとエラーが出て止まっちゃう
• その場合、try/catchでどうにかする
• 外部ファイル(hoge.json等)を読み込む際、パスがjsファイル基準になる気がする