HTML Web Workers

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

Web Worker とは何ですか？

HTML ページでスクリプトを実行中は、ページは応答しないままで、スクリプトが完了するまで待ちます。

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

ブラウザのサポート

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

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers インスタンス

以下の例では、バックグラウンドでカウントするシンプルな web worker を作成しています：

カウント：

実際に試してみる

Web Worker サポートの確認

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

if (typeof(Worker) !== "undefined") {
    // はい！Web worker はサポートされています！
    // いくつかのコード.....
}
    // ごめんなさい！Web Worker はサポートされていません！
}

Web Worker ファイルの作成

それでは、外部JavaScriptファイルでweb workerを作成しましょう。

ここでは、カウントスクリプトを作成しています。このスクリプトは"demo_workers.js"ファイルに保存されます：

var i = 0;
function timedCount() {
    i = i + 1;
    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()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

実際に試してみる

Web Worker と DOM

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

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