浅谈webWorker

一、webWorker之初体验

在"setTimeout那些事儿"中，说到JavaScript是单线程。也就是同一时间只能做同一事情。

成都创新互联专业为企业提供汉台网站建设、汉台做网站、汉台网站设计、汉台网站制作等企业网站建设、网页设计与制作、汉台企业网站模板建站服务，十年汉台做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

也好理解，作为浏览器脚本语言，如果JavaScript不是单线程，那么就有点棘手了。比如，与用户交互或者对DOM进行操作时，在一个线程上修改某个DOM，另外的线程删除DOM，这时浏览器该如何抉择呢?

所以，JavaScript是单线程也是有背景的。

如下：

浅谈webWorker


    
        singleThread

浅谈webWorker

但，HTML5引入了一个工作线程（webWorker）的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。

简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。

从而，可以用webWorker来处理一些比较耗时的计算。

如下，主页面：

浅谈webWorker


    
        worker

浅谈webWorker

下面是worker.js的内容:

浅谈webWorker

var i = 0;function timedCount(){    for(var j = 0, sum = 0; j < 100; j++){        for(var i = 0; i < 100000000; i++){
            sum+=i;
        };
    };    //将得到的sum发送回主线程    postMessage(sum);
};//将执行timedCount前的时间，通过postMessage发送回主线程postMessage('Before computing, '+new Date());
timedCount();//结束timedCount后，将结束时间发送回主线程postMessage('After computing, ' +new Date());

浅谈webWorker

上面代码执行的流程是：创建的worker对象，并用onmessage方法接收worker.js里面postMessage传递过来的数据(event.data)，并将数据追加到div#result中。

所以，执行上面的代码结果如下：

浅谈webWorker

图一

待worker.js中的timedCount方法运算完后，执行postMessage操作，向主线程传数据，得图二。期间，并不影响主线程的运作。

浅谈webWorker

图二

二、webWorker之常用ＡＰＩ

接下来，再来看看关于worker的常用API：

1、postMessage(data)

子线程与主线程之间互相通信使用方法，传递的data为任意值。

浅谈webWorker

//worker = new Worker('url');//worker.postMessage传递给子线程数据，对象worker.postMessage({first:1,second:2});//子线程中也可以使用postMessage，如传递字符串postMessage(‘test’);

浅谈webWorker

2、terminate()

主线程中终止worker，此后无法再利用其进行消息传递。注意：一旦terminate后，无法重新启用，只能另外创建。

//worker = new Worker('url');worker.terminate();

如，主页面：

浅谈webWorker


    
        worker

浅谈webWorker

子线程worker.js代码：

//当主线程发来信息后，触发该message事件onmessage = function(event){    //向主线程发送event.data.name信息    postMessage(event.data.name);
};

3、message

当有消息发送时，触发该事件。且，消息发送是双向的，消息内容可通过data来获取。

message使用，可见terminate中的demo

4、error

出错处理。且错误消息可以通过e.message来获取。

如下：

浅谈webWorker

//worker = new Worker('url');worker.onerror = function(e){    //打印出错消息    console.log(e.message);    //中断与子线程的联系    worker.terminate();
}

浅谈webWorker

另：worker线程从上到下同步运行它的代码，然后进入异步阶段来对事件及计时器响应，如果worker注册了message事件处理程序，新航道托福只要其有可能触发，worker就一直在内存中，不会退出，所以通信完毕后得手动在主线程中terminate或者子线程中close掉，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。

三、worker上下文

先看下面这段代码：

主页面：

浅谈webWorker


    
        worker

浅谈webWorker

worker.js

浅谈webWorker

//window对象的alert方法alert(1);
onmessage = function(event){    //向主线程发送event.data.name信息    postMessage(event.data.name);
};

浅谈webWorker

执行上面代码结果：

浅谈webWorker

为什么会这样呢？原因是alert为window对象的方法，所以会报错undefined。

worker.js执行的上下文，与主页面html执行时的上下文并不相同，最顶层的对象并不是window，woker.js执行的全局上下文，是个叫做WorkerGlobalScope的东东，所以无法访问window、与window相关的DOM API，但是可以与setTimeout、setInterval等协作。
WorkerGlobalScope作用域下的常用属性、方法如下：

1、self

我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用

2、location

location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变。

3、close

关闭当前线程，与terminate作用类似

4、importScripts

　　我们可以通过importScripts()方法通过url在worker中加载库函数

5、XMLHttpRequest

有了它，才能发出Ajax请求

6、setTimeout/setInterval以及addEventListener/postMessage

四、关于worker

我们可以做什么：

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.IE这个新特性

当前文章：浅谈webWorker
标题URL：http://cqcxhl.com/article/jjjiss.html

重庆分公司，新征程启航

浅谈webWorker

其他资讯