HTML5 Web ワーカ

❮ 前章へ 次章へ ❯

web ワーカは、ページのパフォーマンスに影響を与えずに、バックグランドで実行する JavaScript です。

Webワーカどは？

HTML ページでスクリプトを実行する場合、ページはスクリプトが終了するまでの間は無応答状態になります。

Web ワーカは、ページのパフォーマンスに影響を与えずに、 他のスクリプトから独立して、バックグラウンドで実行する JavaScript です。 Web ワーカがバックグラウンドで動作している間、クリックやら選択するなど好きなことを続けることができます。

ブラウザ・サポート

表中の数字は、完全に web ワーカをサポートした最初のブラウザのバージョンを示しています。

API
web ワーカ 4.0 10.0 3.5 4.0 11.5

HTML web ワーカの例

下の例では、バックグラウンドで数字を数える簡単な Web ワーカを作成しています：

例

Count numbers:


Try it yourself ❯

Webワーカのサポート確認 Support

Webワーカを作成する前に、ブラウザがサポートしているかどうかを確認します：

if(typeof(Worker) !== "undefined") {
    // Yes! Web worker support!
    // Some code.....
} else {
    // Sorry! No Web Worker support..
}

Web ワーカ・ファイルの作成

外部 JavaScript で Web ワーカを作成してみましょう。

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

var i = 0;

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

timedCount();

上記のコードの重要な部分は、HTMLページの背後でメッセージを配信するために使用している postMessage() メソッドです。

注:通常、Web ワーカは、もっと CPU 集中型のタスクに使用しますが、このような単純なスクリプトには使用しません。

Webワーカ・オブジェクトの作成

今、Webワーカ・ファイルを作りましたので、HTMLページから呼び出してみます。

次の行は、ワーカが既に存在するかどうかをチェックします - もし存在しなければ、新規に Web ワーカーオブジェクトを作成し、 "demo_workers.js" のコードを実行します：

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

これで、Webワーカからメッセージ送受信ができるようになります。

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

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

Web ワーカがメッセージを配信するときに、イベントリスナー内のコードが実行されます。 Web ワーカからのデータは、event.dataに格納されます。

Web ワーカの終了

Web ワーカ・オブジェクトが作成されると、終了するまで（外部スクリプトが終了した後であっても） メッセージをリッスンし続けます。

Web ワーカを終了し、ブラウザ/コンピュータ·リソースをフリーにするには、terminate() メソッドを使用します：

w.terminate();

Web ワーカの再利用

ワーカ変数に undefined を設定した場合、終了した後にコードを再利用することができるようになります：

w = undefined;

完全な Web ワーカのサンプルコード

既に .JS ファイル内のワーカ・コードを見てきました。下は、HTML ページ用のコードです：

例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <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;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

Try it yourself ❯

Web ワーカと DOM

Web ワーカは外部ファイルにあるので、次の JavaScript オブジェクトへのアクセスを持っていません：


❮ 前章へ 次章へ ❯