Web Worker API

Web Worker はバックグラウンドで動作する JavaScript で、ページのパフォーマンスに影響を与えません。

Web Worker とは何ですか？

HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しません。

Web Worker はバックグラウンドで動作する JavaScript で、他のスクリプトとは独立して、ページのパフォーマンスに影響を与えません。あなたが何かしたいことを続けることができます：クリック、コンテンツの選択など、同時に Web Worker がバックグラウンドで動作します。

ブラウザのサポート

表の数字は、Web Workers を完全にサポートする最初のブラウザバージョンを示しています：

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010年1月 2012年9月 2009年6月 2009年6月 2011年6月

Web Worker インスタンス

以下の例では、バックグラウンドで数字を計算する簡単な Web Worker を作成しています：

例

カウント：

自分で試してみる

Web Worker ブラウザの確認

Web Worker を作成する前に、ユーザーのブラウザがそれをサポートしているか確認してください：

if (typeof(Worker) !== "undefined") {
  // はい！Web worker サポート！
  // あるコード.....
}
  // ごめんなさい！Web Worker サポートはありません。
}

Web Worker ファイルの作成

さて、外部JavaScriptで私たちのWeb Workerを作成しましょう。

ここでは、重要なスクリプトを作成します。このスクリプトは "demo_workers.js" ファイルに保存されます：

let i = 0;
function timedCount() {
  i++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

上記のコードの重要な部分は postMessage() メソッド - メッセージをHTMLページに戻すために使用されます。

注釈：通常、web workerはこのようなシンプルなスクリプトではなく、CPU集中型タスクに使用されます。

Web Worker オブジェクトの作成

今やweb workerファイルがありますが、HTMLページからそれを呼び出す必要があります。

以下のコード行は、workerが存在するかどうかをチェックし、存在しない場合には新しいweb workerオブジェクトを作成し "demo_workers.js" 内のコードを実行します：

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

その後、Web Workerからのメッセージを送信および受信できます。

Web Worker に "onmessage" イベントリスナーを追加します。

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Web Worker がメッセージを発行するとき、イベントリスナー内のコードを実行します。Web Workerからのデータは event.data に保存されます。

Web Worker を終了する

Web Worker オブジェクトが作成されたとき、外部スクリプトが終了した後でも、メッセージを監視し続けます（終了されるまで）。

Web Worker を終了し、ブラウザ/コンピュータのリソースを解放するには、以下を使用してください： terminate() 方法：

w.terminate();

Web Worker の再利用

worker 変数を undefined に設定すると、終了後には以下のコードを再利用できます：

w = undefined;

完全な Web Worker 例コード

すでに .js ファイルで Worker コードを見ました。以下は HTML ページのコードです：

例

<!DOCTYPE html>
<html>
<body>
<p>数を数える: <output id="result"></output></p>
<button onclick="startWorker()">スタートワーカー</button>
<button onclick="stopWorker()">Worker 停止</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

自分で試してみる

Web Worker と DOM

Web Worker は外部ファイルに位置しているため、以下の JavaScript オブジェクトにアクセスできません：

  • window オブジェクト
  • document オブジェクト
  • parent オブジェクト