Webワーカーは、ページのパフォーマンスに影響を与えずにバックグラウンドで実行されているJavaScriptです。
Webワーカーとは何ですか？
HTMLページでスクリプトを実行すると、スクリプトが終了するまでページは応答しなくなります。
Webワーカーは、ページのパフォーマンスに影響を与えることなく、他のスクリプトとは関係なくバックグラウンドで実行されるJavaScriptです。
Webワーカーがバックグラウンドで実行されている間も、クリック、モノの選択など、必要なことは何でも続けることができます。
ブラウザのサポート
表内の数字は、Web Workersを完全にサポートする最初のブラウザバージョンを示しています。
| API | クローム | IE/エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|---|
| Web ワーカー対応開始のバージョン | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
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ワーカーオブジェクトを作成します。
Webワーカーファイルができたので、HTMLページから呼び出す必要があります。
次の行では、ワーカーがすでに存在するかどうかを確認します。存在しない場合は、新しいWebワーカーオブジェクトを作成し、
“demo_workers.js”のコードを実行します。:
if (typeof(w) == “undefined”) {
w = new Worker(“demo_workers.js”);
}
その後、Webワーカーとメッセージを送受信できます。
“onmessage” イベントリスナをWebワーカーに追加してください。
w.onmessage = function(event){
document.getElementById(“result”).innerHTML = event.data;
};
Webワーカーがメッセージを投稿すると、イベントリスナー内のコードが実行されます。Webワーカーからのデータはevent.dataに格納されています。
Webワーカーを終了する
Webワーカーオブジェクトが作成されると、それは終了するまで（外部スクリプトが終了した後でも）メッセージを待機し続けます。
Webワーカーを終了し、ブラウザ/コンピュータのリソースを解放するには、次の
terminate() メソッドを使います 。
w.terminate();
Webワーカーを再利用する
ワーカー変数を未定義に設定した場合は、終了後にコードを再利用できます。
w = undefined;
Full フル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>
<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>
WebワーカーとDOM
Webワーカーは外部ファイルにあるため、次のJavaScriptオブジェクトにアクセスすることはできません。
- ウィンドウオブジェクト
- 文書オブジェクト
- 親オブジェクト