首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议182:使用Web Worker

关灯直达底部

随着HTML 5的流行,当JavaScript工作线程对Ajax应用是一个比较迫切的实现要求时,Web Worker得到更多浏览器的支持,从而可以在Ajax应用中得到更多的使用。对于Ajax应用开发者来说,必须紧跟HTML 5标准的发展潮流。

WHATAG工作组借鉴了Google Gears的成功经验,创建了Web Worker规范,并将其作为HTML 5标准的一部分。Web Worker规范定义了一套API,允许Web应用创建在后台执行JavaScript代码的工作线程。工作线程在执行过程中不会对主页面造成影响。

在Web Worker规范中定义了两类工作线程,分别是专属工作线程和共享工作线程。专属工作线程只能为一个页面所使用,而共享工作线程则可以被多个页面所共享。通过Worker构造方法可以创建一个新的专属工作线程,在创建时要指定需要执行的JavaScript文件的URL。Web Worker规范并不支持从JavaScript代码文本中直接创建工作线程。创建工作线程的页面和工作线程之间通过简单的消息传递来进行交互。通过工作线程对象的postMessage方法就可以发送消息给工作线程,而通过onmessage属性就可以设置接收到消息时的处理方法。在工作线程的JavaScript代码中做法也是相同的。例如,下面给出了使用Web Worker计算质数个数的实现方法。

(1)使用专属工作线程的主页面代码


var worker=new Worker("prime_worker.js");

worker.onmessage=function(event){

var result=event.data;

alert("计算完成,质数个数为:"+result);

};

function calculate{

var limit=parseInt(document.getElementById("limit").value)||100000;

worker.postMessage(limit);

}


在主页面中创建了一个专属工作线程,让它在后台执行JavaScript文件prime_worker.js。下面给出在prime_worker.js中与主页面通信部分的代码。

(2)专属工作线程所执行的JavaScript代码


onmessage=function(event){

var limit=event.data;

var count=calculateNormal(limit);

postMessage(count);

}


共享工作线程的使用方式与专属工作线程有所不同。共享工作线程允许多个页面共享使用,每个页面都是连接到该共享工作线程的某个端口(port)上,页面通过此端口与共享工作线程进行通信。使用SharedWorker构造方法可以创建出共享工作线程的实例。在发送消息时,需要使用的是工作线程的port对象。下面是使用共享工作线程的主页面代码:


var worker=new SharedWorker("prime_worker.js");

worker.port.onmessage=function(event){

var result=event.data;

alert("计算完成,质数个数为:"+result);

};

function calculate{

var limit=parseInt(document.getElementById("limit").value)||100000;

worker.port.postMessage(limit);

}


在共享工作线程所执行的JavaScript代码中,不能使用onmessage来直接定义接收到消息时的处理方法,而需要使用onconnect来定义接收到连接时的处理逻辑。

(3)共享工作线程所执行的JavaScript代码


onconnect=function(event){

var port=event.ports[0];

port.onmessage=function(event){

var limit=event.data;

var count=calculateNormal(limit);

port.postMessage(count);

};

}


如上所示,在onconnect的处理方法中,设置了当从某个端口上接收到消息时应该执行的处理逻辑。

除了通过onmessage属性来设置消息处理方法之外,还可以使用addEventListener来添加消息处理方法,这样做的好处是可以添加多个事件处理方法。需要注意的是,如果使用addEventListener来添加事件处理方法,在添加完成之后,需要调用port.start方法来显式地启动端口上的通信。

Web Worker目前只有一些较新的浏览器上支持Web Worker,如Firefox 3.5、Safari 4、Google Chrome 4和Opera 10.6等以及它们的更高版本。由于IE的主流版本不支持Web Worker,使用Web Worker编写的Web应用是不能在IE上运行的。