介绍

此篇文章摘自 http://blog.csdn.net/dojotoolkit/article/details/25030289

通过使用Web Worker，我们可以在浏览器后台运行JavaScript，而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。

Web Worker 可以让你在后台运行Javascript

一般来说Javascript和页面的UI会共用一个线程，所以当点击一个按钮开始运行Javascript后，在这段代码运行完毕之前，页面是无法响应用户操作的，换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行，那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码，用户可以创建多个worker线程。所以你可以在前台做一些小规模分布式计算之类的工作，不过Web Worker有以下一些使用限制：

Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document之类的浏览器全局变量；
不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。

有两种Web Worker

Web workers可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束；这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中，“Work”类型代表Dedicated web worker，而“SharedWorker”类型代表Shared web worker。

在绝大多数情况下，使用Dedicated web worker就足够了，因为一般来说在web worker中运行的代码是专为当前页面服务的。而在一些特定情况下，web worker可能运行的是更为普遍性的代码，可以为多个页面服务。在这种情况下，我们会创建一个共享线程的Shared web worker，它可以被与之相关联的多个页面访问，只有当所有关联的的页面都关闭的时候，该Shared web worker才会结束。相对Dedicated web worker，shared web worker稍微复杂些。

“Worker”对象代表Dedicated Web Worker

addEventListener("message", function(evt){  
var date = new Date();  
var currentDate = null;  
do {  
currentDate = new Date();  
}while(currentDate - date < evt.data);  
postMessage(currentDate);  
}, false); 
以上代码表示lengthytask.js代码

$(document).ready(function(){  
if(!Modernizr.webworker){  
alert("This browser doesn't support Web Worker!");  
return;  
}  
$("#btnStart").click(function(){  
var worker = new Worker("script/lengthytask.js");  
worker.addEventListener("message", function(evt){  
alert(evt.data);  
}, false);  
worker.postMessage(10000)  
});  
});

以上代码在后台监听message时间，并获取页面传来的参数：10000；这里实际上是一个计时函数：在message事件被触发10000毫秒之后，把结果（currentDate）传给页面。
所以当点击“Start Processing”按钮，页面会在10秒钟后把当时的时刻alert出来。在这10秒钟内页面依然可以响应鼠标键盘事件。

“SharedWorker”对象代表Shared Web Worker

前面的代码使用的是dedicated web worker。这一节会用shared web worker代替dedicated web worker，来区别两者的不同。下面是同一个例子的shared web worker版本：

addEventListener("message", function(evt){  
var date = new Date();  
var currentDate = null;  
do {  
currentDate = new Date();  
}while(currentDate - date < evt.data);  
postMessage(currentDate);  
}, false);

这里创建了一个SharedWorker对象，并把message事件绑定在shared worker的port对象上；同样由port对象发起postMessage，开始执行后台代码sharedlengthytask.js

以下是sharedlengthytask.js
var port;
addEventListener(“connect”, function(evt){
port = evt.ports[0];
port.addEventListener(“message”, function(evt){
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
}while(currentDate - date < evt.data);
port.postMessage(currentDate);
}, false);
port.start();
}, false);

使用SharedWorker对象的后台代码需要绑定connect和message事件， connect事件会在页面上的port被start时触发。之后的message事件的回调函数与之前的基本相同，最后port调用postMessage方法把结果传回给页面。

Web Worker使用XMLHttpRequest与服务端通信

addEventListener("message", function(evt){  
var xhr = new XMLHttpRequest();  
xhr.open("GET", "lengthytaskhandler.ashx");  
xhr.onload = function(){  
postMessage(xhr.responseText);  
};  
xhr.send();  
},false);

通过Error事件捕捉错误信息

当我们把越来越复杂的逻辑加到Web Worker里时，错误处理机制是必不可少的。而Web Worker恰恰提供了error事件，供开发者捕捉错误信息。下面的代码展示了如何绑定error事件：

$(“#btnStart”).click(function(){
var worker = new Worker(“scripts/lengthytask.js”);
worker.addEventListener(“error”, function(evt){
alert(“Line #” + evt.lineno + “ - “ + evt.message + “ in “ + evt.filename);
}, false);
worker.postMessage(10000);
});

如上可见， Worker对象可以绑定error事件；而且evt对象中包含错误所在的代码文件（evt.filename）、错误所在的代码行数（evt.lineno）、以及错误信息（evt.message）。

通过terminate()方法终止Web Worker

有些情况下，我们可能需要强制终止执行中的Web Worker。Worker对象提供了terminate()来终止自身执行任务，被终止的Worker对象不能被重启或重用，我们只能新建另一个Worker实例来执行新的任务。

总结

Web Worker可以在后台执行脚本，而不会阻塞页面交互。Worker对象分为两种：专用式Web Worker和共享式Web Worker：专用式的Web Worker只能被当个页面使用，而共享式的Web Worker可以在被多个页面使用。另外，本文还介绍了Web Worker的错误处理机制，以及使用Ajax与服务端交互。