Web Worker使用入门

Web Worker 在独立线程中运行。因此，它们执行的代码需要保存在一个单独的文件中。但在保存代码前，我们要先在您的主网页上创建新的 Worker 对象。构造函数采用 Worker 脚本的名称：

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

 
如果指定的异步下载文件存在，浏览器就会生成新的 Worker 线程。在完全下载并执行文件之前，系统不会生成 Worker。如果指向您 Worker 的路径返回 404，Worker 就会在不显示任何提示的情况下失败。

创建 Worker 之后，通过调用 postMessage() 方法启动：

worker.postMessage(); // Start the worker.

 
通过消息传递与 WORKER 通信

Worker 与其父网页之间的通信是通过事件模型和 postMessage() 方法实现的。postMessage() 可以接受字符串或 JSON 对象作为单个参数，具体取决于您的浏览器/版本。新式浏览器的最新版支持传递 JSON 对象。

以下示例使用字符串将“Hello World”传递给了 doWork.js 中的 Worker。Worker 直接返回了传递给它的消息。

主脚本：

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

worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // Send data to our worker.

 doWork.js (Worker)：

 

self.addEventListener('message', function(e) { 
     self.postMessage(e.data); 
}, false);

 
在主网页中调用 postMessage() 时，我们的 Worker 通过定义 message 事件的 onmessage 处理程序来处理消息。您可以在 Event.data 中访问消息有效负载（此示例中为“Hello World”）。虽然这个特殊的示例并不精彩，但它说明 postMessage() 也是您将数据传回主线程的一种方法。很方便！

在主网页和 Worker 之间传递的消息是复制而不是共享的。

 实际发生的情况是，系统将对象传递给 Worker 后，会将其序列化，随后在另一端解取消序列化。由于网页和 Worker 并不共享同一实例，因此每次传递时都要进行复制。大部分浏览器通过在任一端上对值进行自动 JSON 编码/解码来实施此功能。

 

 请注意：停止 Worker 的方法有两种：

在主网页中调用 worker terminate()，或在 Worker 本身内部调用 self.close()。

 

适用于 WORKER 的功能

由于 Web Worker 的多线程行为，所以它们只能使用 JavaScript 功能的子集：
navigator 对象
location 对象（只读）
XMLHttpRequest
setTimeout()/clearTimeout() 和 setInterval()/clearInterval()
应用缓存
使用 importScripts() 方法导入外部脚本
生成其他 Web Worker

Worker 无法使用：
DOM（非线程安全）
window 对象
document 对象
parent 对象

 

加载外部脚本

您可以通过 importScripts() 函数将外部脚本文件或库加载到 Worker 中。该方法采用零个或多个字符串表示要导入的资源的文件名。

此示例将 script1.js 和 script2.js 加载到了 Worker 中：

worker.js：

 

importScripts('script1.js');
importScripts('script2.js');

 
也可以写成单个导入语句：

importScripts('script1.js', 'script2.js');

 

 

see：

 

http://www.html5rocks.com/zh/tutorials/workers/basics/

评论

1 楼 avrilxu 2013-01-04  

嗯，很清晰，该说到的知识点，都提到了，赞一个