Html5 web worker 的总结

1.使用场景

a.如果开发人员创建的web应用程序需要执行一些后台的数据处理，但是又不希望这些数据处理任务影响web本身的交互性，那么可以通过web workers生成一个web workers去执行数据处理任务，同时添加一个事件监听器去监听它发出的消息。

b.另外一个用途就是监听后台服务器广播的新闻消息，收到后台服务器的消息后，将其显示在web页面上。在与后台服务器的对话场景中，web workers可能会使用到web sockets或者server-sent事件。

2.web workers的使用方法

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

新线程中：

//worker.js
onmessage = function(evt){
var d = evt.data;
//通过evt.data获得发送来的数据
postMessage(d);
//将获取到的数据发送回主线程
}

主线程中：

<script type="text/javascritp">
//web页主线程，创建一个worker对象并向它传递将在新线程中执行的脚本的URL
var worker = new worker("worker.js");
//向worker发送数据
worker.postMessage("hello world");
//接收worker传过来的数据函数
worker.onmessage = function(evt){
//输出worker发送过来的数据
console.log(evt.data);
}

</script>

在主线程中使用web workers前，首先应该检测浏览器的支持情况，

通过这个例子我们可以看出使用web worker主要分为以下几部分

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没有访问document对象的权限，所以在worker中必须使用importScripts来导入其它的JavaScript文件。

importScripts(“example.js”)

总结：

我们可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

有哪些局限性：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

关于web workers的相关文章：

http://blog.jobbole.com/30592/

http://blog.jobbole.com/30445/