什么是Web Workers？

时间 2019-11-24

标签什么 web workers 栏目 HTML 繁體版

原文原文链接

WEB Workers提高WEB前端脚本JavaScript的处理性能

你有没有想过在运行大型复杂的JavaScript脚本的时候不会发生浏览器假死？
你有没有想过JavaScript能够在后台运行？
你有没有想过JavaScript函数甚至能够在多个进程中同时运行？
不可能？当你看完本文，也许会让你感受很兴奋！

什么是Web Workers？
Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被建立，Web Workers就能够经过postMessage()向任务池发送任务请求，执行完以后再经过postMessage()返回消息给建立者指定的事件处理程序(经过onmessage进行捕获)。
Web Workers进程可以在不影响用户界面的状况下处理任务，而且，它还可使用XMLHttpRequest来处理I/O，不管responseXML和channel属性是否为null。
注意：一般，后台进程（包括web workers进程）不能对DOM进行操做。若是但愿后台程序处理的结果可以改变DOM，只能经过返回消息给建立者的回调函数进行处理。
浏览器支持：
FireFox3.5(Firefox 3.1 support for DOM workers)
Safari4
支持html5的浏览器
进程安全
Workers接口能够建立真正的系统级别的进程，若是你不当心的话，你的代码很容易引发并发操做效果，这将会颇有趣。

在Mozilla下，Workser并发操做常发生在：
1、在作网站下载的时候使用Worker。
2、使用Worker实现处理扩展功能。

建立一个Worker
咱们能够很简单地建立一个worker，只要调用Worker(URI)构造函数便可。参数URI，要执行的脚本文件地址。
若是你想获取worker进程的返回值，能够经过它的onmessage属性来绑定一个事件处理程序，如：

var myWorker = new Worker('easyui.js');
myWorker.onmessage = function(event){
alert('Called back by the worker!');
};
第一行用来建立和运行worker进程，第二行设置worker的onmessage属性用来绑定指定的事件处理程序,当worker私有的postMessage()方法被调用时，这个被绑定的程序就会被触发。

建立一个subworkers
若是原意，你能够建立多个workers。subworkers必须寄宿于同一个父页面下，而且，它的URI必须与parent worker的地址同源。这样能够很好的维持它们的依赖关系。

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();/* imports nothing */
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 文件 javascript

JScript codehtml

var results = [];前端

var resultReceiver = function(event){html5

results.push(parseInt(event.data,10));java

if(results.length==2){web

postMessage(results[0]+results[1]);算法

}后端

};浏览器

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 = new Worker("fibonacci.js");

worker.onmessage = resultReceiver;

worker.onerror = errorReceiver;

worker.postMessage(n-i);

}

};

onmessage函数在worker调用postMessage()时被触发，这时便开始递归。在里边建立新的worker拷贝对每次的计算结果进行迭代。
HTML代码

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML4.0 Transitional//EN">

<html>

<head>

<title>Test threads fibonacci</title>

</head>

<body>

<div id="result">http://www.v-ec.com/dh20156/article.asp?id=242</div>

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

worker.onmessage = function(event){

document.getElementById('result').innerHTML = event.data;

dump('Got:'+event.data+'/n');

};

worker.onerror = function(event){

dump('Worker error:'+error.message+'/n');

throw error;

};

worker.postMessage('5');

</script>

</body>

</html>

在页面中建立了一个ID为result的DIV用来显示计算结果，而后建立worker，设置onmessage事件用来显示计算结果到result，设置onerrer事件用来设置dump错误信息。
最后，发送“5”到worker，开始计算。
在后台操做 WEB I/O
你能够在此查看到一篇关于Using workers in extensions的文章。
在多个workers进程中处理任务
随着多核计算机的普及，在多进程处理复杂的任务也愈来愈被更多的人使用，在多个workers进程中处理任务的演示不久将会提供给你们。
在workers中建立workers
前面Fibonacci例子的演示中咱们看到，在workers中能够建立其余的workers，这使得递归很容易进行。
发送对象给workers
你能够经过postMessage()方法安全地将对象传递到workers或者从中返回对象；这些对象将被自动转换为JSON格式。
var onmessage = function(e){
postMessage(e.data);
};
注意：在workers中进出的对象不能包含函数和循环引用，由于JSON不支持它们。
See also参见：
WebWorkers
Worker
WorkerGlobalScope
SharedWorker
Web Workers specification
转载请注明出处：http://www.v-ec.com/dh20156/article.asp?id=242
通过WEB前端DHTML精英俱乐部测试发现，Safari4已经能够支持Web Workers，不过貌似还不支持在worker中建立worker，因此，本文中上面的Fibonacci例子测试失败，WEB前端DHTML精英俱乐部从新写了一个实例进行演示：
WEB前端专家DHTML精英俱乐部对Web Workers进行的性能测试！

Firefox 3.5 其中一个最大的特性就是对 worker 的支持(固然safari也支持)。workers不只仅可以让咱们将来的web APP更加MVC。同时,他的异步后端运算给web程序带来更多可能性。

到底有什么好处？来看实例更加直接一些. mozbox的Paul Rouget用模拟退火算法（Simulated annealing）给咱们演示了workers的优越性。

1. 不了解 Simulated annealing 的能够先看看这个图形化的演示过程，了解的同窗直接看第二步

http://people.mozilla.com/~prouget/demos/simulatedAnnealing/index.xhtml

先load，而后start

2. 肯定一下，您有没有安装firefox 3.5 beta3 。

3. 看看worker的演示吧.

http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml

能够看到若是没有使用workers,同时计算6个Simulated annealing,能够发现浏览器已经卡死，gif图片也中止播放。

当咱们开启workers的演示后，浏览器不只仅没有卡死，同时gif图片也正常播放，而且结果的现实比没有开启workers前快很多。

开发文档地址 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html