HTML Web Workers
- 前のページ HTML5 アプリケーションキャッシュ
- 次のページ HTML5 SSE
Web workerはバックグラウンドで実行されるJavaScriptであり、ページのパフォーマンスに影響を与えません。
Web Workerとは何ですか？
HTMLページでスクリプトを実行中は、ページは応答しないままで、スクリプトが完了するまで待ちます。
Web workerはバックグラウンドで実行されるJavaScriptであり、他のスクリプトとは独立しており、ページのパフォーマンスに影響を与えません。あなたは好きなことを続けることができます：クリック、選択など、その時点でweb workerはバックグラウンドで動作しています。
ブラウザのサポート
テーブルの数字は、Web Workerを完全にサポートする最初のブラウザのバージョンを示しています。
| API | |||||
| Web Worker | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Web Worker のサポートを確認する
Web Worker を作成する前に、ユーザーのブラウザがそれをサポートしているかを確認してください：
if (typeof(Worker) !== "undefined") {
// はい！Web worker はサポートされています！
// 一部のコード.....
}
// ごめんなさい！Web Worker はサポートされていません！
}
Web Worker ファイルの作成
それでは、外部JavaScriptファイルでweb workerを作成してみましょう。
ここで、カウントスクリプトを作成しました。このスクリプトは"demo_workers.js"ファイルに保存されます：
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
このコードの中で重要なのはpostMessage()メソッドであり、それがHTMLページにメッセージを返すために使用されます。
コメント: web workerは通常このような単純なスクリプトではなく、CPUリソースを消費するタスクに使用されます。
Web Workerオブジェクトの作成
今やweb workerファイルがありますが、HTMLページからそれを呼び出す必要があります。
以下のコード行はworkerが存在するかどうかをチェックします。存在しない場合、新しいweb workerオブジェクトを作成し、"demo_workers.js"内のコードを実行します：
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
その後、web workerから発生したメッセージを受け取ることができます。
web workerに"onmessage"イベントリスナーを追加します：
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
}
web workerがメッセージを送信するとき、イベントリスナー内のコードを実行します。web workerからのデータはevent.dataに格納されます。
Web Workerを終了する
web workerが作成された後は、メッセージを監視し続けます（外部スクリプトが終了した後でも）。終了されるまで続きます。
web workerを終了し、ブラウザ/コンピュータのリソースを解放するには、terminate()メソッドを使用してください：
w.terminate();
Web Workerの再利用
worker変数をundefinedに設定した場合、終了後にはそのコードを再利用できます：
w = undefined;
完全なWeb Workerインスタンスコード
すでに.jsファイル内のWorkerコードが見られました。以下はHTMLページのコードです：
例
<!DOCTYPE html>
<html>
<body>
<p>数を数える: <output id="result"></output></p>
<button onclick="startWorker()">Workerを開始</button>
<button onclick="stopWorker()">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;
}
}
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Worker と DOM
Web Worker は外部ファイルに位置しているため、以下の JavaScript オブジェクトにアクセスできません：
- window オブジェクト
- document オブジェクト
- parent オブジェクト
- 前のページ HTML5 アプリケーションキャッシュ
- 次のページ HTML5 SSE
