HTML5之web workers_动力节点Java学院整理

2020-04-24 19:47:33易采站长站整理

专用 Web Worker (Dedicated Web Worker) 提供了一个简单的方法使得 web 内容能够在后台运行脚本。一旦 worker 创建后,它可以向由它的创建者指定的事件监听函数传递消息,这样该 worker 生成的所有任务就都会接收到这些消息。worker 线程能够在不干扰 UI 的情况下执行任务。另外,它还能够使用XMLHttpRequest(虽然responseXML与channel 两个属性值始终是null)来执行I/O 操作。本文通过提供例子和细节补全了前面的文档。提供给 worker 的函数列出了 worker 所支持的函数。

Worker接口会生成真正的操作系统级别的线程,如果你不太小心,那么并发(concurrency)会对你的代码产生有趣的影响。然而,对于 web worker 来说,与其他线程的通信点会被很小心的控制,这意味着你很难引起并发问题。你没有办法去访问非线程安全的组件或者是 DOM,此外你还需要通过序列化对象来与线程交互特定的数据。所以你要是不费点劲儿,还真搞不出错误来。生成 worker

创建一个新的 worker 十分简单。你所要做的就是调用Worker()构造函数,指定一个要在 worker 线程内运行的脚本的 URI,如果你希望能够收到 worker 的通知,可以将 worker 的onmessage属性设置成一个特定的事件处理函数。


var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
console.log("Called back by the worker!n");
};

或者,你也可以使用addEventListener():


var myWorker = new Worker("my_task.js");
myWorker.addEventListener("message", function (oEvent) {
console.log("Called back by the worker!n");
}, false);
myWorker.postMessage(""); // start the worker.

例子中的第一行创建了一个新的 worker 线程。第三行为 worker 设置了message事件的监听函数。当 worker 调用自己的postMessage() 函数时就会调用这个事件处理函数。最后,第七行启动了 worker 线程。注意: 传入Worker构造函数的参数 URI 必须遵循同源策略。目前,不同的浏览器制造商对于哪些 URI 应该遵循同源策略尚有分歧;Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 及后续版本允许传入 data URI,而 Internet Explorer 10 则不认为 Blob URI 对于 worker 来说是一个有效的脚本。

传递数据

在主页面与 worker 之间传递的数据是通过拷贝,而不是共享来完成的。传递给worker 的对象需要经过序列化,接下来在另一端还需要反序列化。页面与 worker不会共享同一个实例,最终的结果就是在每次通信结束时生成了数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

在往下进行之前,出于教学的目的,让我们创建一个名为emulateMessage()的函数,它将模拟在从worker到主页面(反之亦然)的通信过程中,变量的「拷贝而非共享」行为: