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); 
} www.2cto.com
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

 

作者：jiancm2001