Web Worker はバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。
HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しません。
Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web worker がバックグラウンドで実行されている間、クリックしたり、何かを選択したりなど、必要な操作を続けることができます。
表内の数字は、Web Workers を完全にサポートする最初のブラウザ リリースを示します。
| API | |||||
| Web Worker | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Web worker を作成する前に、ユーザーのブラウザが Web worker をサポートしているかどうかを確認してください。
if (typeof(Worker) !== "undefined") {
// はい！ Web worker をサポートしてください!
// 何らかのコード....
} else {
// Web Worker はサポートされていません!
}
次に、外部 JavaScript ファイルに Web worker を作成しましょう。
ここでは count スクリプトを作成します。 このスクリプトは「demo_workers.js」ファイルに保存されます。
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
上記のコードの重要な部分は postMessage() メソッドです。このメソッドは、HTML ページにメッセージを送り返すために使用されます。
注: Web ワーカーは通常、このような単純なスクリプトには使用されず、より CPU を集中的に使用するタスクに使用されます。
Web worker ファイルが完成したので、それを HTML ページから呼び出す必要があります。
次のコード行は、worker が存在するかどうかを確認し、存在しない場合は、新しい Web worker オブジェクトを作成し、「demo_workers.js」でコードを実行します。
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
これで、Web Workerr からメッセージを送受信できるようになります。
「onmessage」イベント リスナーを Web ワーカーに追加します。
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();
worke1r 変数を未定義に設定すると、終了後にこのコードを再利用できます。
w = undefined;
.js ファイル内の Worker コードはすでに確認しました。 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>
<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;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web worker は外部ファイル内にあるため、次のサンプル JavaScript オブジェクトにアクセスできません。