WebワーカーのJavaScript APIの紹介

ウェブワーカー あなたができるJavaScript APIです メインスレッドとは別のスレッドでスクリプトを実行する. バックグラウンド風のスクリプトが原因で、メインスクリプトの実行に支障がない場合に便利です。.

Web Workers APIは ほとんどすべてのブラウザでサポートされています, より詳細な情報については、CanIUseのドキュメントをご覧ください。コードを理解する前に、このAPIを使用する必要がある可能性があるシナリオをいくつか見てみましょう。背景風スクリプト.

ユースケース

そのスクリプトがあるとしましょう ファイルを取り出して処理する. ファイルが かなり 大きすぎると、処理に時間がかかります。これは後で実行されることから後で呼び出された他のスクリプトを失速させるかもしれません.

しかし、 ファイル処理はバックグラウンドスレッドに移動します, として知られている ワーカースレッド, 前のイベントが終了するまで他のイベントはブロックされません.

スクリプト バックグラウンドワーカースレッドで実行されます。 として知られている ワーカースクリプト または単に ワーカー.

別の例として、 タブで配置された大きなフォーム. 1つのタブでコントロールを更新するようにスクリプト化されています 他のコントロールに影響を与える.

他のタブの更新に時間がかかる場合 現在のタブを継続して使用することはできません そのイベントが保留にされることなく。これはUIをフリーズさせるかもしれません。.

現在のタブに入力している間、ユーザーは他のタブを見ることはありませんので、 バックグラウンドスレッドの他のタブのコントロールを更新する. このようにして、他のタブのコントロールの更新プロセスによってスクリプトがブロックされることなく、ユーザーは自分が入力している現在のタブを引き続き使用できます。.

同様に、スクリプトが存在するシナリオを見つけた場合 ユーザーがユーザーインターフェースを使用できないようにブロックする可能性があります。 実行が完了するまでは、バックグラウンドで実行できるように、ワーカースレッドに移動することを検討します。.

労働者の範囲と種類

Web Workers APIはおそらく最も単純なAPIの1つです。それは非常に簡単な方法があります ワーカースレッドを作成する そして メインスクリプトからそれらと通信する.

ワーカースレッドのグローバルスコープはメインスレッドとは異なるコンテキストにあります。君は のメソッドやプロパティにアクセスできない 窓 物 といった alert（） ワーカースレッド内あなたも DOMを直接変更することはできません ワーカースレッドから.

しかし、あなたは できる 下にある多くのAPIを使う 窓, 例えば 約束する そして フェッチ, あなたのワーカースレッドで（完全なリストを見てください）.

あなたも持つことができます ネストしたワーカースレッド：別のワーカースレッドから作成されたワーカースレッド他の人が作った労働者は サブワーカー.

もあります たくさんの タイプ 労働者の. 2つの主なものは 献身的で共有された労働者.

献身的な労働者 同じ閲覧コンテキストに属している メインスレッドが属すること。しかし共有労働者は 別の閲覧コンテキストに存在する メインスクリプトから（たとえば、iframe内）。どちらの場合も、メインスクリプトとワーカー 同じドメインに属している必要があります.

このチュートリアルの例は次のようになります。 熱心な労働者について, これは最も一般的なタイプです.

APIメソッド

下の図を見てください。 すべての主な方法の概要 Web Workers APIを構成するもの.

の ワーカー（） コンストラクタ 専用ワーカースレッドを作成します そして 参照オブジェクトを返します. それから、このオブジェクトを使用して、その特定のワーカーと通信します。.

の postMessage（） methodはメインスクリプトとワーカースクリプトの両方で使用されます。 互いにデータを送信する. 送信されたデータはそれから反対側でそれから受信されます オンメッセージ イベントハンドラ.

の terminate（） 方法 メインスクリプトからワーカースレッドを終了します。. この終了は 即時の：現在実行中のスクリプトと保留中のスクリプトはキャンセルされます。の 閉じる（） methodは同じことをしますが、それはそれです 自分自身を閉じるワーカースレッドによって呼び出されます。.

コード例

それでは、サンプルコードを見てみましょう。の index.html ページは メインスクリプト の中

私たちはメインスクリプトからワーカースレッドを作成する.

  w = new Worker（ 'worker.js'）; 
 の ワーカー（） コンストラクタ ワーカーファイルのURLを引数として取ります。.
 それから、イベントハンドラを追加します。 オンメッセージ 新しく作成されたワーカーインスタンスのイベント そこからデータを受け取る. の データ の財産 e イベントは受信データを保持します.
  w = new Worker（ 'worker.js'）; w.onmessage =（e）=> console.log（ 'workerから受信しました：$ e.data'）;  
 今、使っています postMessage（） に ワーカースレッドにデータを送信する ボタンをクリックするだけで。の postMessage（） methodは2つの引数を取ることができます。最初のものはどんな型（文字列、配列…）でも構いません。それはデータです ワーカースレッドに送信される （または、メソッドがワーカースレッドに存在する場合はメインスクリプトに）.
 2番目のオプションのパラメータは、次のようなオブジェクトの配列です。 ワーカースレッドで使用可能 （ただし、メインスクリプトによるものではない、またはその逆）。これらの種類のオブジェクトはと呼ばれます 譲渡可能 オブジェクト.
  document.querySelector（ 'button'）。onclick =（）=> w.postMessage（ 'john'）;  
 ワーカースレッドに文字列値を送信しているだけです.
 ワーカースレッドで、我々は追加する必要があります オンメッセージ イベントハンドラ データを受け取ります ボタンをクリックするとメインスクリプトによって送信されます。ハンドラの中では、 受け取った文字列を他の文字列と連結する そして結果をメインスクリプトに送り返す.
  console.info（ 'worker created'）; onmessage =（e）=> postMessage（ 'Hi $ e.data'）;  
 メインスクリプトとは異なり、 w 参照オブジェクト 特定のワーカースレッドを参照する スクリプトはそれを使用します オンメッセージ そして postMessage 方法は、あります ワーカースレッドに参照オブジェクトは不要 メインスレッドを指す.
 コードは次のように機能します。ブラウザが起動したとき index.html, コンソールには 「ワーカー作成」 すぐにメッセージ ワーカー（） コンストラクタはメインスレッドで実行されます, 新しいワーカーを作る.
 ページ上のボタンをクリックすると、 「労働者からもらった：こんにちはジョン」 コンソール内のメッセージ。 ワーカースレッド内で連結 それに送信されたデータと メインスクリプトに返送.