Via.js - Web WorkerでもDOMを利用可能に

JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。

しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。

Via.jsの使い方

デモです。ボタンを押すとWeb Audio APIを実行します。

その他、DOM操作もできます。

const document = via.document;
const button = document.createElement("button");
button.textContent = "Click me";
button.style.fontWeight = "bold";
button.addEventListener("click", () =>
{
    console.log("[Worker] Click event");
});
document.body.appendChild(button);

documentではなくvia.documentを使うのが一つのコツですが、それ以外についてはほぼそのままDOMが利用できます。また、ドキュメントのタイトルやURLを取得する場合には get を使います。

const docTitle = await get(via.document.title);

仕組みとしてはJavaScriptのProxyを使っているとのことです。そして、postMessageを使ってHTML側とデータを送受信しています。また、速度的に大きなメリットはなく、通常のDOM操作が30〜40msなのに対して、Via.jsは処理全体で70〜90msかかってしまうようです。現状、大きな問題としてメモリリークが発生しているらしく、その点において本番環境での利用はお勧めしないとしています。とはいえ、技術的には非常に面白いソフトウェアでしょう。

Via.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Via.js demo

AshleyScirra/via.js: Use the DOM in a Web Worker.