Html5之web workers多线程

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）

 

 

<script type=text/javascript>|r| var worker =new Worker('test.js'); |r| worker.onmessage =function(evt){ |r| alert(evt.data);|r| }|r| function onload() {|r| worker.postMessage(40);|r| }|r| onload();|r| </script>sfsdfdsfdsfdfdsf

 

注意：

 

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做它自己擅长的事吧。