HTML 网络工作者API

Web Worker 是在后台运行的 JavaScript，不会影响页面的性能。

什么是网络工作者？

在 HTML 页面中执行脚本时，页面将变得无响应，直到脚本完成。

Web Worker 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。当 Web Worker 在后台运行时，您可以继续执行您想做的任何操作：单击、选择内容等。

浏览器支持

表中的数字指定第一个完全支持 Web Workers 的浏览器版本。

API
Web Workers	4.0	10.0	3.5	4.0	11.5

HTML Web Worker 示例

下面的示例创建了一个简单的 Web Worker，用于在后台计算数字：

示例

Count numbers:

亲自试一试 »

检查 Web Worker 支持

在创建Web Worker之前，请检查用户的浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}

创建 Web Worker 文件

现在，让我们在外部 JavaScript 中创建 Web Worker。

在这里，我们创建了一个重要的脚本。该脚本存储在"demo_workers.js" 文件中：

var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

上面代码的重要部分是postMessage()方法 - 用于将消息发送回 HTML 页面。

笔记：通常，Web Worker 不用于此类简单的脚本，而是用于 CPU 密集型任务。

创建 Web Worker 对象

现在我们有了 Web Worker 文件，我们需要从 HTML 页面调用它。

以下行检查工作线程是否已存在，如果不存在，它将创建一个新的网络工作线程对象并运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}

然后我们可以从网络工作者发送和接收消息。

向网络工作线程添加 "onmessage" 事件侦听器。

w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

当 Web Worker 发布消息时，事件侦听器中的代码将被执行。来自 Web Worker 的数据存储在 event.data 中。

终止 Web Worker

当创建 Web Worker 对象时，它将继续侦听消息（即使在外部脚本完成之后），直到其终止。

要终止 Web Worker 并释放浏览器/计算机资源，请使用terminate()方法：

w.terminate();

重用 Web Worker

如果将worker变量设置为未定义，则在其终止后，您可以重用以下代码：

w = undefined;

完整的 Web Worker 示例代码

我们已经在 .js 文件中看到了 Worker 代码。下面是 HTML 页面的代码：

示例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

亲自试一试 »

Web Worker 和 DOM

由于 Web Worker 位于外部文件中，因此他们无权访问以下 JavaScript 对象：

窗口对象
文档对象
父对象