HTML Web Workers API
Webワーカーは、ページのパフォーマンスに影響を与えることなく、バックグラウンドで実行されるJavaScriptです。
Webワーカーとは何ですか？
HTMLページでスクリプトを実行すると、スクリプトが終了するまでページが応答しなくなります。
Webワーカーは、ページのパフォーマンスに影響を与えることなく、他のスクリプトとは独立してバックグラウンドで実行されるJavaScriptです。Webワーカーがバックグラウンドで実行されている間、クリック、選択など、好きなことを続けることができます。
ブラウザのサポート
表の数字は、Webワーカーを完全にサポートする最初のブラウザーバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTMLWebワーカーの例
以下の例では、バックグラウンドで数値をカウントする単純なWebワーカーを作成します。
例
Webワーカーのサポートを確認する
Webワーカーを作成する前に、ユーザーのブラウザーが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();
上記のコードの重要な部分は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ワーカーを再利用する
ワーカー変数を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>
<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オブジェクトにアクセスできません。
- ウィンドウオブジェクト
- ドキュメントオブジェクト
- 親オブジェクト