html5 web worker 011

web workerはバックグラウンドで実行されるJavaScriptであり、ページのパフォーマンスには影響しません.
Web Workerとは?
HTMLページでスクリプトを実行すると、スクリプトが完了するまでページの状態は応答できません.
web workerはバックグラウンドで実行されるJavaScriptで、他のスクリプトとは独立してページのパフォーマンスに影響しません.Web workerがバックグラウンドで実行されると、クリック、コンテンツの選択など、やりたいことを続けることができます.
Web Workerサポートの検出
Web workerを作成する前に、ユーザーのブラウザがサポートしているかどうかを検出します.

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

Web workerファイルの作成
では、外部JavaScriptでWeb workerを作成します.
ここでは、カウントスクリプトを作成します.このスクリプトは、demo_workers.jsファイルに格納されます.

var i=0;

function timedCount()
{
i=i+1;postMessage(i);setTimeout("timedCount()",500);
}

timedCount();

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がメッセージを渡すと、イベントリスナーのコードが実行されます.event.dataにはeventが格納されている.dataのデータ.
Web Workerの終了
Web workerオブジェクトを作成すると、外部スクリプトが終了するまでメッセージをリスニングし続けます.
Web workerを終了し、ブラウザ/コンピュータリソースを解放するにはterminate()メソッドを使用します.

w.terminate();