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/