web work

Web Worker

什么是Web worker？为什么要用它？我们必须要先了解这些，才能更好的去使用这个技术。

一般来说，在我们进行项目开发过程中，我们开发完的项目，浏览器在加载解析的时候Javascript和页面的UI会共用一个线程，当一段Javascript代码运行完毕之前，此时的浏览器反映就是：鼠标变成忙碌状态，点击页面没有任何反映，就是我们比较常见的，整个浏览器页面变成灰白，鼠标处于转圈，怎么点都不动，点的多了会提示关闭或者等待。这种情况就是js跟ui共用了一个线程，必须要等js脚本加载编译完以后才可以，像这种情况就会比较浪费性能，浪费时间，这时候通过使用Web Worker， 我们可以在浏览器后台运行Javascript， 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。

创建后台进程，这些进程不会卡死用户界面，所以使用Web Worker更适合用来进行纯数据、与UI无关、较耗费CPU的计算。

接下来还是先来了解一下浏览器对该技术的支持：

if(typeof(Worker)!=="undefined"){

alert('支持多线程');

}else{

alert('不支持多线程');}

经过判断，IE6789不支持，所以开发过程中使用该技术需注意避开这几种浏览器。接下来就来看一下webworker的核心api语法吧：

1、创建Worker对象：new Worker( url );

参数url：处理该Worker进程的JS文件路径 var ww = new Worker('test.js');/

2、页面向worker发送数据：postMessage(msg)

参数msg： 向Worker发送的数据。ww.postMessage('hello girls');

最好为字符串，其他数据格式注意兼容问题

3、页面接收Worker数据：

message事件 Worker返回数据时触发

ww.addEventListener('message',function(e){

alert(e.data); //弹出worker返回的数据

},false);

4、Worker接收数据：message事件 页面发送数据时触发

Worker返回数据：postMessage(msg);参数msg： 向页面发送的数据

addEventListener('message',function(e){

// e.data-->'hello girls'

var data = "you say:" + e.data;

postMessage(data);

},false);

停止Worker

在页面里面：terminate()

在Worker里面：close()

在Worker内部可以再开启子进程：importScripts(url[,url])

最后在使用过程中有几个需要注意的地方：

1）Worker全局对象不再是window，而是self

2）由于web worker位于外部文件中，不能访问window、DOM、但可以访问计时器、ajax等

3）不同浏览器对跨域限制不同，最好不要跨域 子线程webkit不兼容，不建议使用