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));
};
2)html页面(test.html)

<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.上面的样例最好放到server上执行。(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做它自己擅长的事吧。