Web Workers入门

如何创建一个 Web Workers ？

var worker = new Worker('task.js');    

worker.onmessage = function(event) {    

    console.log(event.data + " Jan!");    

};    

worker.postMessage("Hello");  

worker.onerror = function(event) {  

    console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);  

}  

 

task.js

self.onmessage = function(event) {  

    var data = event.data + "! My name is";  

    self.postMessage(data);  

}  

 

首先要理解，Web Workers 是什么？

 

Web Workers 就是让浏览器脚本处理实现多线程的规范，旨在解决海量数据处理时导致的页面堵塞情况。

但Web Worker中的代码无法进行DOM操作。

因为Worker是一个独立的作用域，独立于浏览器之外，只能进行JavaScript核心（ECMAScript）的操作。

 

下面介绍一下具体的方法：

 

Worker

创建一个新的Web Worker。

var worker = new Worker('task.js');  

这段代码执行时，浏览器就会加载task.js这个文件。

js文件加载完成后，不会立刻执行。Worker脚本只有在接收到信息时，才会执行。

Web Worker目前不能实现跨域脚本。

 

onmessage

worker.onmessage = function(event) { ...};   

onmessage 方法需要绑定一个回调函数。

当触发 message 事件时，回调函数就会执行。并把 Worker脚本 中返回的数据传入回调函数中。

返回的数据其实是一个 MessageEvent 对象，处理后的数据实际是存放在 MessageEvent对象 的 data属性 中。

 

postMessage

worker.postMessage("Hello");

postMessage 方法，用来传递信息，当信息传递成功时，就会触发 message事件。

postMessage 无论带不带参数，都会触发 message事件。

并且，postMessage 实现的数据传递，是异步执行的。

JSON结构的值也能作为参数传递：

 

worker.postMessage({  

    name: "Jan",  

    age: "99"  

});   

　　

onerror

worker.onerror = function(event) {  

    console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);  

}  

onerror 方法也需要绑定一个回调函数。当 Worker脚本 无法顺利执行时，就会触发 error事件 ，执行绑定的回调函数。

 

terminate

worker.terminate()； 

terminate方法，可以用来停止当前运行的 Worker脚本：

 

在 Worker脚本 中，原理大致和页面中的 worker对象 一样。

可以通过 onmessage 接收页面传递的数据，并且执行绑定的函数。

也可以通过 postMessage 来向页面传递数据。

不过不同的是，在 Worker脚本 内部想终止执行，代码如下：

self.close(); 

当然，还可以往Worker脚本中注入js文件：

importScript("task1.js", "task2.js", "task3.js"); 

代码的执行顺序：task1.js -> task2.js -> task3.js

 

 

 

 

更多相关资料：https://developer.mozilla.org/en/Using_web_workers