HTML5 Web ワーカー

Web ワーカーとは何ですか?

HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しない状態になります。

Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web ワーカーがバックグラウンドで実行されている間、クリックや選択など、必要な操作を続行できます。

ブラウザのサポート

Internet Explorer 10、Firefox、Chrome、Safari、および Opera はすべて Web ワーカーをサポートします。

HTML5 Web ワーカーインスタンス

次の例は、バックグラウンドでカウントする単純な Web ワーカーを作成します:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<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 = "抱歉，你的浏览器不支持 Web Workers...";
        }
    }
    function stopWorker()
    {
        w.terminate();
        w = undefined;
    }
</script>
</body>
</html>

プログラムを実行して試してみましょう

demo_workers.js ファイルコード:

var i=0;

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

timedCount();

ブラウザが Web Worker をサポートしているかどうかを検出します

Web ワーカーを作成する前に、ユーザーのブラウザが Web ワーカーをサポートしているかどうかを確認してください:

if(typeof(Worker)!=="未定義")
{
// Web ワーカーサポート!
// 関連コード... ..
}
else
{
// 申し訳ありません! Web Worker はサポートされていません..
}

Web ワーカーファイルを作成します

次に、外部 JavaScript で Web ワーカーを作成しましょう。

ここではカウントスクリプトを作成しました。スクリプトは「demo_workers.js」ファイルに保存されます:

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

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

注: Web ワーカーは通常、このような単純なスクリプトには使用されず、より CPU を集中的に使用するタスクに使用されます。

Web Worker オブジェクトを作成する

Web Worker ファイルは既にあるので、HTML ページからそれを呼び出す必要があります。 /p>

次のコードは、ワーカーが存在するかどうかを検出し、存在しない場合は、新しい Web ワーカーオブジェクトを作成して、「demo_workers.js」内のコードを実行します。 /p>

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

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

「onmessage」イベントリスナーを Web ワーカーに追加します:

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

<pweb=""worker="" がメッセージを配信すると、イベントリスナーのコードが実行されます。 events.data="" には、""event.data="" からのデータが含まれます。

Web ワーカーの終了

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

Web ワーカーを終了し、ブラウザ/コンピューターのリソースを解放するには、terminate() メソッドを使用してください:

w.terminate();

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

.js ファイル内の Worker コードを見てきました。 HTML ページのコードは次のとおりです:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<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 = "抱歉，你的浏览器不支持 Web Workers...";
        }
    }
    function stopWorker()
    {
        w.terminate();
        w = undefined;
    }
</script>
</body>
</html>

Web ワーカーと DOM

Web ワーカーは外部ファイル内にあるため、次の JavaScript オブジェクトにアクセスできません:

ウィンドウオブジェクト
ドキュメントオブジェクト
親オブジェクト

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <p>计数： <output id="result"></output></p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p> <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 = "抱歉，你的浏览器不支持 Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html>

提出するリセットコード

自動運転