Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
1、首先看一个实例：
1）js文件(test.js)
var fibonacci =function(n) {
return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
onmessage =function(event) {
var n = parseInt(event.data, 10);
postMessage(fibonacci(n));
};
<html>
<script type="text/javascript">
var worker =new Worker('test.js');
worker.onmessage =function(evt){
alert(evt.data);
}
function onload() {
worker.postMessage(40);
}
onload();
</script>
<body>
sfsdfdsfdsfdfdsf
<input type="text" value="abc"></input>
<div id="test">
</div>
</body>
</html>1.上面的例子最好放到服务器上运行。(chrome不支持本地的)
2.上面的例子可以发现，页面会先渲染body中的html内容，在子线程中去执行负责的计算，等子线程计算完毕后把结果传递给主线程。如果不使用web workers，直接把计算部分放到主线程中，那么浏览器处于单线程中，会顺序执行，导致下面的页面无法加载。
2、web workers流程：
WEB主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程：
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
3、web workers知识点：
1.worker.onmessage
绑定主线程的message事件，当worker调用postMessage时方法时，绑定的事件处理程序会被调用到，传递来的数据可以使用MouseEvent的data属性获取，通过target属性还可以获取worker对象
2.self是什么
self是woker中对自身的引用，有些像this
3.close()
在worker内部调用close()方法效果和在外部调用worker实例的terminate()方法效果一样，终止worker运行
4.onmessage
在这个句柄内接收外部调用者传递的参数，参数可以通过e.data获取
5.self.postMessage()
没错通过这个方法我们可以在worker内把结果传递给主线程，主线程上绑定的message事件的处理程序会被调。
6.全新的JavaScript环境
当一个Worker实例被创建的时候，它会在一个全新的JavaScript运行环境中，完全和创建worker的脚本分离开，即使我们传递的消息是引用类型它们也是复制传递的，修改worker中的参数不影响创建脚本中的参数。
7.importScripts()
我们可以通过importScripts()方法通过url在worker中加载库函数，如下：
importScripts('utility/dialog.js','common/cookie.js');
方法可以接受多个url，相对地址的url以当前worker为参照，方法会按照参数顺序依次下载运行库函数，如果中间某个脚本出错，剩下的都不会被载入和执行，而且这个方法是同步的，只有所有脚本都加载、运行完后才会返回。
注：importScripts方法可以加载跨域的文件。使用worker的构造函数时的js文件只能是同源的。
8.worker执行模型
worker线程从上到下同步运行它的代码，然后进入异步阶段来对事件及计时器响应，如果worker注册了message事件处理程序，只要其有可能触发，worker就一直在内存中，不会退出，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。
9.web worker中可以使用什么
1)self自身引用
2)可以使用JavaScript的全局对象：JSON、Date()、Array
3)location对象，但是其属性都是只读的，改了也影响不到调用者
4)navigator对象
5)setTimeout()、setInterval()及其对应清除方法
6)addEventListener()、removeEventListener()
7)最后web worker还支持sub worker和共享worker，这方面没有太仔细看，浏览器兼容性也不讨理想，有兴趣同学可以上网搜索研究一下。
10.web worker 弱点：
1)在worker中不能使用window对象和docuemnt对象（dom对象），即：不能在主、子线程中共享dom操作。
2)不能跨域加载work的js(在使用work的构造方法时)
3)web worker只能用来加载同域下的json数据，而这方面ajax已经可以做到了，而且效率更高更通用。还是让Worker做它自己擅长的事吧。
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
