はじめに
昨今の 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 にも対応しているので、アプリのように使用することもできるので、是非使ってみてください。
参考