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 文件
JScript code
var results = [];
var resultReceiver = function(event){
results.push(parseInt(event.data,10));
if(results.length==2){
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>
<script type="text/javascript">
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前快不少。
分享到：
相关推荐
与 web workers 集成的更好方式，使用JavaScript Proxies与Web worker进行通信，类似于与普通对象交互
vue-worker以一种简单的方式使用webworkers的Vue插件
Html5+WebWorkers定时通讯心跳处理
本文介绍了WebWorkers，并引导您了解一个实践示例，向您展示如何将WebWorkers运用到您的web应用程序中。随着Ajax和Web2.0应用程序的出现，终端用户被快速响应的web应用程序宠坏了。要让web应用程序响应得更快，瓶颈...
node-webworker, NodeJS的WebWorkers实现 node-webworkers 是网络工作者API的一个实现，用于 node.js 。请参见这里的设计文档 。示例主源var sys = require('sys');var Worker = require('web
WEB开发 之 HTML 5 Web Workers.docx
安装如果您没有 ： npm i @ng-web-apis/common现在安装软件包： npm i @ng-web-apis/workers使用方法创建一个worker并在AsyncPipe的模板中使用它： import { WebWorker } from '@ng-web-apis/workers' ;function ...
Using Web workers to implement multi-threaded programming with javascript.
html5中Webworkers的工作原理
JavaScript开发在JestJSDOM中使用WebWorkers
html5 web workers的作用及使用场景.docx
一般情况下，当在HTML页面中执行脚本时，页面的状态是不可响应的，知道脚本已经完成。
07_Web Workers_测试.html
08_Web Workers_应用.html
学习WebWorkers（和comlink） 这只是我正在学习的一件事。 注意：服务端可以修改网络请求，但是服务端可以运行昂贵的脚本而无需冻结UI： : WebWorkers甚至在IE 10中也可用。 您可以使用WebWorkers释放主线程和...
Vue.js中使用Web Workers来创建一个秒表
可以在WebWorkers中使用的纯JavaScript Canvas实现 当必须执行长脚本而主程序必须保持运行（不能被阻止）时，WebWorkers非常有用。 当必须生成复杂的图像（例如，游戏的纹理较大）时，该生成可能会阻塞游戏。 一种...
Workers 多线程学习DEMO,也可以直接使用。
Worker Box 一个帮助您测试Web Workers的工具箱。它提供了一种简单的方法来创建，存根和修改您的工作而无需复杂的测试服务器或monkey补丁。