Webワーカー

Webワーカーを使用してバックグラウンドでJavaScriptコードを実行する方法を学ぶ

前書き

JavaScriptはシングルスレッドです。同時に並行して実行できるものはありません。

並行プログラミングで発生する一連の問題について心配する必要がないため、これは素晴らしいことです。

この制限により、JavaScriptコードは最初から効率的であることが強制されます。そうしないと、ユーザーのエクスペリエンスが低下します。スレッドのブロックを回避するために、高価な操作は非同期にする必要があります。

JavaScriptアプリケーションのニーズが高まるにつれ、これはいくつかのシナリオで問題になり始めました。

Web Workersは、ブラウザー内での並列実行の可能性を紹介します。

それらにはかなりの数の制限があります。

  • アクセスできませんDOM：WindowオブジェクトとDocumentオブジェクト
  • メッセージングを使用してメインのJavaScriptプログラムと通信できます
  • それらは同じオリジン（ドメイン、ポート、プロトコル）からロードする必要があります
  • ファイルプロトコルを使用してページを提供する場合、これらは機能しません（file://）

メインスレッドにあるWindowではなく、WebWorkerのグローバルスコープはWorkerGlobalScopeオブジェクト。

Webワーカーのブラウザーサポート

かなり良い！

Browser support for web workers

を使用してWebWorkersのサポートを確認できます

if (typeof Worker !== 'undefined') {
}

Webワーカーを作成する

Webワーカーを作成するには、Workerオブジェクトを初期化し、同じオリジンからJavaScriptファイルをロードします。

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

Webワーカーとの通信

Webワーカーと通信する主な方法は2つあります。

WebWorkerオブジェクトでpostMessageを使用する

を使用してメッセージを送信できますpostMessageにWorkerオブジェクト。

重要：メッセージは共有されるのではなく、転送されます。

main.js

const worker = new Worker('worker.js')
worker.postMessage('hello')

worker.js

onmessage = event => {
  console.log(event.data)
}

onerror = event => {
console.error(event.message)
}

メッセージを送り返す

ワーカーは、それを作成した関数にメッセージを送り返すことができます。そのグローバルを使用してpostMessage()関数：

worker.js

onmessage = event => {
  console.log(event.data)
  postMessage('hey')
}

onerror = event => {
console.error(event.message)
}

main.js

const worker = new Worker('worker.js')
worker.postMessage('hello')

worker.onmessage = event => {
console.log(event.data)
}

複数のイベントリスナー

複数のリスナーを設定する場合message使用する代わりにイベントonmessageイベントリスナーを作成します（に適用されますerrorイベントも）：

worker.js

addEventListener('message', event => {
  console.log(event.data)
  postMessage('hey')
}, false)

addEventListener(‘message’, event => {
console.log(I'm curious and I'm listening too)
}, false)


addEventListener(‘error’, event => {
console.log(event.message)
}, false)

main.js

const worker = new Worker('worker.js')
worker.postMessage('hello')

worker.addEventListener(‘message’, event => {
console.log(event.data)
}, false)

Channel MessagingAPIの使用

WebWorkersが提供する組み込みのpostMessageAPIを使用する代わりに、より汎用的な使用を選択できます。チャネルメッセージングAPI彼らとコミュニケーションをとる。

main.js

const worker = new Worker('worker.js')
const messageChannel = new MessageChannel()
messageChannel.port1.addEventListener('message', event => {
  console.log(event.data)
})
worker.postMessage(data, [messageChannel.port2])

worker.js

addEventListener('message', event => {
  console.log(event.data)
})

Web Workerは、にメッセージを投稿することでメッセージを送り返すことができます。messageChannel.port2、 このような：

addEventListener('message', event => {
  event.ports[0].postMessage(data)
})

Webワーカーのライフサイクル

Web Workersが起動され、メッセージをリッスンモードのままにしない場合はworker.onmessageまたは、イベントリスナーを追加することで、コードが完了するとすぐにシャットダウンされます。

Webワーカーは、その使用を使用して停止できますterminate()メインスレッドからのメソッド、およびグローバルメソッドを使用したワーカー自体の内部close()：

main.js

const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.terminate()

worker.js

worker.onmessage = event => {
  console.log(event.data)
  close()
}

worker.onerror = event => {
console.error(event.message)
}

Webワーカーでのライブラリのロード

WebワーカーはimportScripts()グローバルスコープで定義されたグローバル関数：

importScripts('../utils/file.js', './something.js')

Webワーカーで利用可能なAPI

前に述べたように、DOMはWebワーカーから到達できないため、windowそしてdocumentオブジェクト。またparent利用できません。

ただし、次のような他の多くのAPIを使用できます。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル：


Tech Wiki Online！