web worker JavaScriptがページのパフォーマンスに影響を与えることなく、バックグラウンドで実行されています。
何がWeb Worker ？
HTMLページでスクリプトを実行する場合、スクリプトが終了するまで、ページが応答しなくなります。
ウェブワーカーは、World Wide Webコンソーシアム（W3C）とWebハイパーテキスト応用技術ワーキンググループ（WHATWG）によって定義されるように、独立して他のユーザーインターフェイススクリプトをバックグラウンドで実行されるHTMLページから実行されるJavaScriptのスクリプトでありますまた、同じHTMLページから実行された可能性があります。 ウェブ労働者は多くの場合、より効果的にマルチコアCPUを利用することができます。
概要
WHATWGによって想定されるように、ウェブの労働者は、比較的重いです。 これらは、高始動性のコスト、および高いインスタンスごとのメモリコストを持つ、長寿命であることが予想されます。
ウェブ労働者が意図したか、彼らがシステムリソースを占有可能性として大量に使用されることが予想されていません。
ウェブ労働者は、バックグラウンドで実行中のブラウザのスレッドと1つまたは複数のJavaScriptのスレッドの同時実行を可能とします。 単一の実行スレッドを次のブラウザは、先に進む前に実行を完了するためにJavaScriptプログラムに待機する必要がありますし、これは、プログラマがユーザーから非表示にするようなことがあり、かなりの時間がかかることがあります。
バックグラウンドでスクリプトを実行中にブラウザが通常の動作を続行することができます。 ウェブワーカー仕様はHTML5仕様から別の仕様であり、HTML5で使用することができます。
専用および共有の労働者：ウェブ労働者の2種類があります。
ウェブ労働者がバックグラウンドで実行すると、彼らはDOMへの直接アクセスを持っていますが、メッセージパッシングによってドキュメントと通信しません。 これは、JavaScriptプログラムのマルチスレッド実行が可能になります。
ブラウザのサポート
表中の数字は完全にサポートする最初のブラウザのバージョンを指定Web Workers 。
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workersの例
以下の例では、簡単な作成web workerの背景に数字を数えます：
チェックしWeb Workerのサポートを
作成する前にweb worker 、ユーザーのブラウザがサポートしているかどうかを確認します。
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
作成しWeb Workerファイルを
今、私たちの作成してみましょうweb worker外部JavaScriptで。
ここでは、カウントするスクリプトを作成します。 スクリプトがに保存されている"/html/demo_workers.js"ファイル：
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
上記のコードの重要な部分であるpostMessage()バックHTMLページにメッセージをポストするために使用される-方法。
Note:通常のweb workers 、このような簡単なスクリプトのため、より多くのCPU集中型のタスクのために使用されていません。
作成しWeb Workerオブジェクトを
今、私たちが持っているweb workerファイルを、私たちは、HTMLページからそれを呼び出す必要があります。
以下の行をチェックした場合web worker既にいない場合は、存在している-それは新しい作成しweb workerオブジェクトをとのコードを実行します"/html/demo_workers.js" ：
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
その後、我々はからメッセージを送信し、受信できるweb worker 。
追加"onmessage"にイベントリスナーをweb worker 。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
ときweb workerポストメッセージは、イベントリスナー内のコードが実行されます。 以下からのデータweb worker event.dataに格納されます。
終了しWeb Worker
ときweb workerオブジェクトが作成され、それがメッセージを受信し続けます(even after the external script is finished) 、それが終了するまで。
終了するには、 web worker 、および無料のブラウザ/コンピュータのリソースを使用terminate()メソッドを：
w.terminate();
リユースWeb Worker
あなたが設定されている場合web worker未定義に変数を、それが終了した後、あなたは、コードを再利用することができます：
w = undefined;
全Web Workerのコード例
我々はすでに見てきWeb Workerのコード.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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/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 WorkersとDOM
以来web workers外部ファイルである、彼らは次のJavaScriptのオブジェクトにアクセスすることはできません。
- ウィンドウオブジェクト
- ドキュメントオブジェクト
- 親オブジェクト