はじめに

昨今の Web サイトは昔と比べて Javascript での処理を多く行うようになっています。
そんな中、Javascript は基本的にシングルスレッドで処理を行うため、ボトルネックになってしまうことがあります。
これを解消するために setTimeout や setInterval を使って、擬似的な並列処理を行なったりしているかと思います。
Web Workers を使うとこうした並列処理を行うことができます。

Web Workers の使い方

doWork.js

self.addEventListener('message', function(e) {
  self.postMessage(e.data)
}, false)

main.js

const worker = new Worker('doWork.js')

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data)
}, false)

worker.postMessage('Hello World')

doWork.js の処理は、worker スレッドで並列処理されます。
worker スレッドと main スレッドは、 post メッセージを使って通信を行います。
また、DOM 要素の操作は worker スレッドで行うことができないため、描画処理は main スレッドで行う必要があります。

エラー処理

error.js

self.addEventListener('message', (message) => {
    const value = 1 + undefinedVariable
})

const worker = new Worker('error.js')

// エラーを表示する
worker.addEventListener('error', (error) => {
   console.log(error)
});

// メッセージを送信する
worker.postMessage('')

通常の処理は、 message イベントを捕捉して処理するのに対し、エラーの処理は、 error イベントを捕捉して処理を行います。

Web Workers の停止

Web Workers を停止するには、 main スレッドからは、 worker.terminate() を呼び出すことで停止することができます。
また、worker スレッドからは、 self.close() を呼ぶことで停止させることができます。

Web Workers で使える機能

navigator オブジェクト
location オブジェクト（読み取り専用）
XMLHttpRequest
setTimeout()/clearTimeout() と setInterval()/clearInterval()
アプリケーションキャッシュ
importScripts() メソッドを使った外部スクリプトのインポート
他のウェブワーカーの生成

Web Workers で使えない機能

DOM（非スレッドセーフ）
window オブジェクト
document オブジェクト
parent オブジェクト

おわりに

Google は、この Web Workers を効率よく使用したアプリケーションとして、squooshを公開しています。
これは、画像の変換処理を Web で行い、その比較をリアルタイムで行えるアプリケーションになっています。
実際に使ってみるとその処理の速さが体感できるかと思います。
また、PWA にも対応しているので、アプリのように使用することもできるので、是非使ってみてください。

参考