JSコード片をObjectURL化してWeb Workerで実行

今Web WorkerといえばService Workerの話題ばかりですが、これからするのは普通のWorker(Dedicated Worker)の話です。

Web Workerはバックグラウンドでスクリプトを実行できるものです。

重い処理をJSで実行するとUIが固まって何の操作も受け付けなくなりますが、Workerは別スレッドで実行するのでUI処理に影響することはありません。UIに影響しないようにDOMにアクセスできないなどの制限がありますが、ArrayBufferを渡してバイナリ処理をしたり、fetch APIを使ってデータを取得して処理したり、できることはいろいろあります。

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API

普通は以下のように別のスクリプトファイルを指定して使いますが…

const worker = new Worker("worker.js");

// ワーカー内でpostMessageが呼ばれた時のハンドラ
worker.onmessage = function(e) {
   window.alert(e.data);
}

// ワーカーにデータを渡す
worker.postMessage("1 + 1");

URL.createObjectURLを使ってURL化したコード片も渡すことができます。

const source = "(" + function() {
    onmessage = function(e) {
        const f = new Function("js", "return eval(js)");
        postMessage(f(e.data));
    }
} + ")();"

const url = URL.createObjectURL(new Blob([source], { type: "application/javascript" }));

const worker = new Worker(url);

worker.onmessage = function(e) {
   window.alert(e.data);
}

worker.postMessage("1 + 1");