webcode 发表于 2013-1-22 22:40:51

WEB Workers 介绍

WEBWorkers提升WEB前端脚本JavaScript的处理性能


你有没有想过在运行大型复杂的JavaScript脚本的时候不会发生浏览器假死?

你有没有想过JavaScript可以在后台运行?

你有没有想过JavaScript函数甚至可以在多个进程中同时运行?


不可能?当你看完本文,也许会让你感觉很兴奋!


什么是Web Workers?

WebWorkers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers就可以通过postMessage()向任务池发送任务请求,执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。

Web Workers进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用XMLHttpRequest来处理I/O,无论responseXML和channel属性是否为null。

注意:通常,后台进程(包括web workers进程)不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM,只能通过返回消息给创建者的回调函数进行处理。


浏览器支持:

FireFox3.5(Firefox 3.1support for DOM workers)
Safari4
支持html5的浏览器


进程安全

Workers接口可以创建真正的系统级别的进程,如果你不小心的话,你的代码很容易引起并发操作效果,这将会很有趣。


在Mozilla下,Workser并发操作常发生在:

1、在做网站下载的时候使用Worker。

2、使用Worker实现处理扩展功能。

创建一个Worker

我们可以很简单地创建一个worker,只要调用Worker(URI)构造函数即可。参数URI,要执行的脚本文件地址。
如果你想获取worker进程的返回值,可以通过它的onmessage属性来绑定一个事件处理程序,如:

var myWorker = newWorker('easyui.js');
myWorker.onmessage =function(event){
alert('Calledback by the worker!');
};

第一行用来创建和运行worker进程,第二行设置worker的onmessage属性用来绑定指定的事件处理程序,当worker私有的postMessage()方法被调用时,这个被绑定的程序就会被触发。


创建一个subworkers

如果原意,你可以创建多个workers。subworkers必须寄宿于同一个父页面下,并且,它的URI必须与parentworker的地址同源。这样可以很好的维持它们的依赖关系。


Timeouts 和intervals

Workers可以使用timeouts和intervals。这很有用,例如,如果你想让你的worker进程周期性地运行而不是不停的循环下去的话,你就可以使用了。

参见:setTimeout(),clearTimeout(),setInterval(),clearInterval()


终止 worker

如果你需要马上终止一个正在运行中的worker,你可以调用它的terminate()方法:

myWorker.terminate();

这样,一个worker进程就被结束了。


错误捕获 Handling errors

当worker发生运行时错误时,它的onerror事件就会被触发。该事件接收一个error的事件,该事件不会冒泡,并且可以取消。要取消该事件可以使用preventDefault()方法。

此错误事件有3个属性:

message:可读的错误信息

filename:发生错误的脚本文件名称

lineno:发生错误的脚本所在文件的行数


访问navigator对象

Workers可以访问navigator对象,它包含下面可以用来标示浏览器的字符:

appName

appVersion

platform

userAgent


导入脚本和库

Worker进程可以访问全局函数importScripts(),该方法可以将脚本或库导入到它们的作用域中。

此方法可以接受空的参数或多个脚本URI参数,下面这些形式都是合法的:

importScripts();/* importsnothing */
importScripts('foo.js');/*import just "foo.js" */
importScripts('foo.js','bar.js');/*imports two scripts */

Firefox会加载列出的每一个脚本文件,然后运行并初始化。这些脚本中的任何全局对象都可以被worker使用。

注意:脚本下载可能顺序不一样,但,执行的顺序一定是按importScripts中列出的顺序进行,而且是同步的,在所有脚本加载完并运行结束后importScripts才会返回。


演示

这部分,我们将演示如何使用DOM Workers.


在后台执行指令

Workers的一个很有用的方法就是使得你的代码可以在后台运行,而不影响用户界面。下面,我们来演示一下使用worker进行Fibonacci数列的计算。

JavaScript代码:

下面的Javascript代码保存到 fibonacci.js 文件
JScript code

var results = [];

var resultReceiver = function(event){
results.push(parseInt(event.data,10));
if(results.length==2){
postMessage(results+results);
}
};

var errorReceiver = function(event){
throw event.data;
};

var onmessage = function(event){
var n = parseInt(event.data,10);
if(n==0||n==1){
postMessage(n);
return;
}
for(var i=0;i<=2;i++){
var worker = newWorker("fibonacci.js");
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n-i);
}
};
页: [1]
查看完整版本: WEB Workers 介绍