HTML5 Web Workers
在本教程中，您将学习如何使用 HTML5 web worker 在后台运行 JavaScript 代码。
什么是 Web Worker？
如果您尝试使用 JavaScript 执行耗时且需要大量计算的密集任务，浏览器将冻结网页并阻止用户执行任何操作，直到任务完成。 这是因为 JavaScript 代码总是在前台运行。
HTML5 引入了一种名为 web worker 的新技术，该技术专门设计用于独立于其他用户界面脚本执行后台工作，而不会影响页面的性能。 与正常的 JavaScript 操作不同，Web Worker 不会中断用户并且网页保持响应，因为它们在后台运行任务。
提示： HTML5 的网络工作者功能在所有主要的现代网络浏览器（如 Firefox、Chrome、Opera、Safari 和 Internet Explorer 10 及更高版本）中均受支持。
创建一个 Web Worker 文件
网络工作者最简单的用途是执行一项耗时的任务。 所以在这里我们将创建一个从零计数到 100,000 的简单 JavaScript 任务。
让我们创建一个名为"worker.js"的外部 JavaScript 文件并输入以下代码。
示例
Downloadvar i = 0;
function countNumbers() {
if(i < 100000) {
i = i + 1;
postMessage(i);
}
// 在再次运行此脚本之前等待一段时间
setTimeout("countNumbers()", 500);
}
countNumbers();注意： Web Worker 无权访问 DOM。 这意味着您无法访问打算使用 Web Worker 运行的 JavaScript 代码中的任何 DOM 元素。
提示：worker 对象的 postMessage() 方法用于将消息（如上例中的数字）从 web worker 文件发送回网页。< /p>
使用 Web Worker 在后台工作
现在我们已经创建了 web worker 文件。 在本节中，我们将从一个 HTML 文档启动 web worker，该文档在后台运行名为"worker.js"的文件中的代码，并逐步在网页上显示结果。 让我们看看它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Web Worker</title>
<script>
if(window.Worker) {
// 创建一个新的 web worker
var worker = new Worker("worker.js");
// 触发 onMessage 事件处理程序
worker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
alert("Sorry, your browser do not support web worker.");
}
</script>
</head>
<body>
<div id="result">
<!--Received messages will be inserted here-->
</div>
</body>
</html>示例说明：
上例中的JavaScript代码含义如下：
- var worker = new Worker("worker.js"); 语句创建了一个新的 web worker 对象，用于与 web worker 通信。
- 当 worker 发布消息时，它会触发 onmessage 事件处理程序（line no-14），允许代码从 web worker 接收消息。
- event.data 元素包含从网络工作者发送的消息。
注意：worker 运行的代码始终存储在单独的 JavaScript 文件中。 这是为了防止 Web 开发人员编写尝试使用全局变量或直接访问网页上的元素的 Web Worker 代码。
终止 web worker
到目前为止，您已经学习了如何创建工作者并开始接收消息。 但是，您也可以在执行过程中终止正在运行的 web worker。
以下示例将向您展示如何通过单击 HTML 按钮从网页启动和停止工作程序。 它使用与我们在上一个示例中使用的相同的 JavaScript 文件"worker.js"来计算从零到 100000 的数字。让我们尝试一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
// Set up global variable
var worker;
function startWorker() {
// 初始化 web worker
worker = new Worker("worker.js");
// 运行更新函数，当我们从 worker 那里得到消息时
worker.onmessage = update;
// 告诉 worker 开始
worker.postMessage("start");
}
function update(event) {
// 使用来自 worker 的当前消息更新页面
document.getElementById("result").innerHTML = event.data;
}
function stopWorker() {
// 停止 worker
worker.terminate();
}
</script>
</head>
<body>
<h1>Web Worker Demo</h1>
<button onclick="startWorker();" type="button">Start web worker</button>
<button type="button" onclick="stopWorker();">Stop web worker</button>
<div id="result">
<!--收到的消息将插入此处-->
</div>
</body>
</html>提示： 仅使用 web workers 执行不中断用户界面脚本（即响应点击或其他用户交互的脚本）的重量级 JavaScript 任务。 不建议将 Web Worker 用于短期任务。