HTML5 WebWorker

Web Workers现在还只是一个w3c的提案，可能随时都会有更改，但是Firefox, Safari和chrome已经将其加入到自己产品中了。Web Workers为浏览器提供了真正的异步计算的能力，web worker里的代码是执行在OS级别上的线程中的。但是目前并不能指望web worker能强大到什么程度，比如不支持同步机制，执行的时候还是js代码... 尽管如此，web worker还是可以解决诸如计算量庞大导致的UI焊住的问题。

使用web workers#

Mozilla有个不错的介绍,另外w3c的提案本身就带有示例代码，这些都可以参考。下面用具体的代码来展示如何使用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为两个外部调用共享了数据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，浏览器照样焊住。