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，浏览器照样焊住。