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

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

访问 navigator 对象

Workers 可以在它的作用域内访问navigator对象。它含有如下能够识别浏览器的字符串,就像在普通脚本中做的那样:

appName
appVersion
platform
userAgent

引入脚本与库

Worker 线程能够访问一个全局函数,importScripts(),该函数允许 worker 将脚本或库引入自己的作用域内。你可以不传入参数,或传入多个脚本的 URI 来引入;以下的例子都是合法的:


importScripts(); /* 什么都不引入 */
importScripts('foo.js'); /* 只引入 "foo.js" */
importScripts('foo.js', 'bar.js'); /* 引入两个脚本 */

浏览器将列出的脚本加载并运行。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载,将抛出NETWORK_ERROR异常,接下来的代码也无法执行。而之前执行的代码(包括使用window.setTimeout()延迟执行的代码)却依然能够使用。importScripts()之后的函数声明依然能够使用,因为它们始终会在其他代码之前运行。注意:脚本的下载顺序不固定,但执行时会按照你将文件名传入到importScripts()中的顺序。这是同步完成的;直到所有脚本都下载并运行完毕,importScripts()才会返回。

例子

本节提供了几个如何使用 DOM worker 的例子。

在后台执行运算

worker 的一个优势在于能够执行处理器密集型的运算而不会阻塞 UI 线程。在下面的例子中,worker 用于计算斐波那契数。

JavaScript 代码

下面的 JavaScript 代码保存在「fibonacci.js」文件中,与下一节的 HTML 文件关联。


var results = [];
function resultReceiver(event) {
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}
function errorReceiver(event) {
throw event.data;
}
onmessage = function(event) {
var n = parseInt(event.data);
if (n == 0 || n == 1) {
postMessage(n);
return;
}
for (var i = 1; i <= 2; i++) {
var worker = new Worker("fibonacci.js");
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n - i);
}
};

worker 将属性onmessage设置为一个函数,当 worker 对象调用postMessage() 时该函数会接收到发送过来的信息。(注意,这么使用并不等同于定义一个同名的全局变量,或是定义一个同名的函数。var onmessage与function onmessage将会定义与该名字相同的全局属性,但是它们不会注册能够接收从创建 worker 的网页发送过来的消息的函数。) 这会启用递归,生成自己的新拷贝来处理计算的每一个循环。

HTML 代码