[javascript HTML5] Q. Web Workersとは?

A.
HTML5では Web Workersが追加されました。
Web Workersを使うとバックグラウンドで表と平行に処理を
行う事が可能です。
バックグラウンドで動かしたいJavaScriptを別ファイルで作成し
var worker = new Worker("worker1.js");
で呼び出して実行します。

ワーカーに対して通信を行いたい場合
worker.postMessage("MESSAGE");
ワーカーからメッセージを受信するには
// EventListener Style
worker.addEventListener("message",function(event)) {
}, false);

// on Style
worker.onmessage = function(event) {
}
のようにWebMessaagesで通信を行います。

並列で処理を行うので操作の競合を避ける為に
WorkerのJavaScriptでは、DOMやWIndowオブジェクトに
アクセスする事はできません。
このようにWorkerで使えるAPIは限定されていますが
XMLHttpRequestやTimer系は利用することが可能です。

詳しくは以下のサイトで確認できます。
HTML5Rocks Features Available to Workers

実際にワーカーを使ってみます。
ワーカーに数字を渡し、1秒ごとに数字をインクリメントして返却する
という簡単なものです。
親 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebWorkers</title>
<script type="text/javascript">
var worker = new Worker("worker1.js");
var mes = "10";
worker.postMessage(mes);
worker.onmessage = function(event) {
  console.log(event);
  console.log(typeof event.data);
  document.getElementsByTagName("body")[0].innerHTML = event.data;
  if(event.data == parseInt(mes) + 2) worker.terminate();
}
</script>
</head>
<body>
</body>
</html>

worker1.js
onmessage = function(event) {
    var i = parseInt(event.data) || 0;
    self.setInterval( function() {
        postMessage(i++);
    }, 1000 );
};

;
実行結果
js_webworker_1.png

ワーカーをCPUのプロセス数に合わせて複数起動を行い計算処理を分散したり
共有ワーカーを利用して複数のiframeなどで処理を共有させる事も可能です。

参考サイト:
HTML5ROCKS The Basics of Web Worker
whatwg WEB WORKERS
Using web workers
Web Workers を使用して Web アプケーションのユーザビリティーを高める