HTML入門 | HTML5 API | Web Worker

Web Worker API

Webページでスクリプトが実行されると、そのスクリプトが終了するまでWebページは応答できない状態になる。 Web Workerは、スクリプトがWebページの性能に影響しないようにバックグラウンドで動作するJavaScriptである。

つまり、Web Workerはスクリプトのマルチスレッドをサポートする。 そのため、ユーザーがWebページを利用しながら、時間のかかるJavaScript処理も同時に実行できる。

Web Workerをサポートする主なWebブラウザーのバージョンは次のとおりである。

Web Workerのサポート確認

Web Workerを使う前に、まずユーザーのWebブラウザーがこれをサポートしているか確認する必要がある。

構文

if (typeof(Worker) !== "undefined") {
    // Web Worker用のコード
} else {
    // Web Workerをサポートしないブラウザー向けの案内
}

Web Workerファイルの作成

Web Workerの動作を確認するため、素数を探す外部JavaScriptファイルを作成する。

例

var n = 1;
search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
        if (n % i == 0)
            continue search;
        postMessage(n);
}

上の例でpostMessage()メソッドは、HTML文書に結果を渡すために使われる。

Web Workerオブジェクトの作成

上で作成したWeb Workerファイルを読み込むHTMLファイルを作成する。

例

if(typeof(webworker) == "undefined") {
    webworker = new Worker("/examples/web_worker.js");
}

上の例は、Web Workerファイルが存在しない場合に新しいWeb Workerオブジェクトを作成する。

workerオブジェクトとの接続

onmessageイベントリスナーを通じて、Web Workerファイルとメッセージをやり取りできる。

例

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

上の例では、Web Workerファイルがメッセージを送ると該当するイベントリスナーが実行される。 このとき、Web Workerファイルが送った情報はevent.dataに保存される。

Web Workerオブジェクトの終了

Web Workerオブジェクトは作成されると、終了するまでメッセージを受け取る準備を続ける。 そのため、Webブラウザーやコンピューターのリソースを返すには、terminate()メソッドでWeb Workerを必ず終了する必要がある。

例

webworker.terminate();

Web Workerオブジェクトの再利用

Web Workerオブジェクトを終了した後は、Web Workerの値をundefinedに設定してから再利用する。

例

webworker = undefined;

Web Workerの例

次の例は、ここまで見たWeb Workerの動作を1つの例として示す。

例

var webworker;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }
        webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; 
    }
}
function stopWorker() { 
    webworker.terminate();
    webworker = undefined;
}