HTML5 WebWorker

Web Workersは現在、w 3 cの提案するにすぎず、いつでも変更される可能性がありますが、Firefox、Safari、chromeはすでに自社製品に組み込まれています.Web Workersはブラウザに本当の非同期計算能力を提供し、web workerのコードはOSレベルのスレッドで実行されます.しかし、同期メカニズムがサポートされていない、実行時にjsコードがあるなど、Web workerがどの程度強くなるかは期待できません.それでも、web workerは、計算量の膨大さによるUI溶接などの問題を解決することができる.
Web workers #の使用
Mozillaには紹介するといういいものがあります.また、w 3 cの提案自体にはサンプルコードがあります.これらは参考になります.Web Workersの使用方法を具体的なコードで示します.
1.htmlにweb workerオブジェクトを作成します.

var worker = new Worker('worker.js');

2.onmessageイベントをバインドし、workerが実装されたonmessageイベントのみがworkerの通知を受け取ることができます.

worker.onmessage = function(event){
    alert(event.data);
};

3.workerにメッセージを発行して実行を開始します.

worker.postMessage('go');

4.workerのコードでは、onmessageを実装して外部のメッセージを受信し、計算が完了したらpostMessageで外部に通知する必要がある.

onmessage = function(event){
    if(event.data == 'go'){
        postMessage('worker done!');
    }
}

5.workerでは、サブworker(subworker)も生成できます.

//work.js:
var subworker = new Worker('subworker.js');
subworker.onmessage = function(e){
    postMessage(e.data.msg)     
}

//subWork.js:
postMessage({
    msg: 'sub worker done'
});

SharedWorker #
chromeとsafariはsharedWorkerをサポートし、workerのデータを共有することができます.
html:

//  SharedWorker  
var sharedworker = new SharedWorker('sharedWorker.js');
sharedworker.port.onmessage = function(e) { // note: not worker.onmessage!
   writeLog(e.data);
}
//sharedWorker    addEventListener   worker     
sharedworker.port.addEventListener('message', function(e) {writeLog('listend:'+e.data);},false);

function testSharedWorker(){
    sharedworker.port.start(); // note: need this when using addEventListener
    sharedworker.port.postMessage('ping');
}

sharedWorker.js:

var count=0;
//    shared worker   onconnect  
onconnect = function(e) {
  var port = e.ports[0];
  count++;
  port.postMessage('Hello World! '+count);
  port.onmessage = function(e) {
    port.postMessage('pong'); // not e.ports[0].postMessage!
  }
}

 
添付ファイルのdemoではiframeで別のhtml(もちろんこのhtmlは同じdomainの下にある)を導入し、このhtmlで同じshared workerを再使用します.shared workerが2つの外部呼び出しに対してデータcountを共有していることがわかります.
innerTest.htm:

var sharedworker = new SharedWorker('sharedWorker.js');
sharedworker.port.postMessage();

表示アタッチメント
いくつかの重要な問題#
すべてのバージョンのIEはweb workerをサポートしていません.
workerのプロパティは親ページにアクセスできません.workerは親ページのDOMノードにアクセスできません.workerはメッセージイベントを通じて外部と通信することができます.
ChromeとSafariはsub workerをサポートしていません.Firefoxはshared worker をサポートしていません.
workerでsettimeout、setInterval を使用できます.
Web workerのパフォーマンスをあまり期待しないでください.Web workerの実行中に親ページにDOMを更新させるイベントが絶えず投げ出された場合、ブラウザは溶接されます.