HTML - Web Workers API
HTML Web Workers API 是一个 JavaScript 特性，用于在后台线程中运行计算密集型任务，而不中断用户界面。
在本 Web Workers API 章节中，您将学习以下主题：
- 什么是 Web Workers？
- Web Workers 的需求
- Web Workers 如何工作？
- 停止 Web Workers
- 处理 Web Workers 错误
- Web Workers 的浏览器支持
什么是 Web Workers？
- Web Workers 允许长时间任务执行而不让步，从而避免页面无响应。
- Web Workers 是后台脚本，它们相对重量级，不适合大量使用。例如，为一张四百万像素图像的每个像素启动一个 worker 是不合适的。
- 当脚本在 Web Worker 中执行时，它无法访问网页的 window 对象（window.document）。
- Web Workers 无法直接访问网页和 DOM API。虽然 Web Workers 不会阻塞浏览器 UI，但它们仍会消耗 CPU 周期并降低系统响应性。
Web Workers 的需求
JavaScript 被设计为在单线程环境中运行，这意味着多个脚本无法同时运行。考虑一种情况，您需要处理 UI 事件、查询并处理大量 API 数据，以及操作 DOM。在 CPU 使用率高的情况下，JavaScript 会导致浏览器挂起。
示例
让我们看一个简单的示例，其中 JavaScript 遍历一个大循环。运行此代码时，您的浏览器将变得无响应：
<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop() {
for (var i = 0; i <= 10000000000; i += 1) {
var j = i;
}
alert("Completed " + j + "iterations");
}
function sayHello() {
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button"
onclick="bigLoop();"
value="Big Loop" />
<input type="button"
onclick="sayHello();"
value="Say Hello" />
</body>
</html>
上述情况可以使用 Web Workers 来处理，它将执行所有计算昂贵的任务，而不中断用户界面，并且通常在单独的线程中运行。
Web Workers 的工作原理
Web Workers 通过 JavaScript 文件的 URL 来初始化，该文件包含 worker 将要执行的代码。此代码设置事件监听器，并与从主页面生成它的脚本进行通信。以下是简单的语法：
var worker = new Worker('bigLoop.js');
如果指定的 JavaScript 文件存在，浏览器将异步下载并生成一个新的 worker 线程。如果 worker 的路径返回 404 错误，worker 将静默失败。
如果我们的应用程序有多个支持的 JavaScript 文件，我们可以使用 importScripts() 方法导入它们，该方法接受以逗号分隔的文件名作为参数，如下所示：
importScripts("helper.js", "anotherHelper.js");
一旦 Web Worker 被生成，web worker 与其父页面之间的通信使用 postMessage() 方法完成。根据浏览器/版本不同，postMessage() 方法可以接受字符串或 JSON 对象作为其唯一参数。
Web Worker 传递的消息在主页面中使用 onmessage 事件来访问。下面是主页面（hello.htm），它将生成一个 web worker 来执行循环并返回变量 j 的最终值：
示例
<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function(event) {
alert("Completed " + event.data + "iterations");
};
function sayHello() {
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button"
onclick="sayHello();"
value="Say Hello" />
</body>
</html>
以下是 bigLoop.js 文件的内容。它使用 postMessage() API 将通信传递回主页面：
for (var i = 0; i <= 1000000000; i += 1){
var j = i;
}
postMessage(j);
bigLoop.js 中的 j 变量使用函数 `postMessage()` 发布，然后在 hello.htm 中通过 `worker.onmessage = function(event) {}` 的事件属性接收。
停止 Web Workers
Web Workers 不会自动停止，但启动它们的页面可以通过调用 terminate() 方法来停止它们。
worker.terminate();
已终止的 Web Worker 将不再响应消息或执行任何额外计算。我们无法重启 worker；相反，我们需要使用相同的 URL 创建一个新的 worker。
处理 Web Workers 错误
您可以使用 worker.onerror() 方法从主线程处理 Web Worker 中发生的错误。
示例
以下是一个 Web Worker JavaScript 文件中错误处理函数的示例，它将错误记录到控制台。使用错误处理代码，上面的示例将变为如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function(event) {
alert("Completed " + event.data + "iterations");
};
worker.onerror = function(event) {
console.log(event.message, event);
};
function sayHello() {
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button"
onclick="sayHello();"
value="Say Hello" />
</body>
</html>
您可以使用以下代码片段作为主页面上 worker 的错误处理器：
worker.onerror = function(event) {
console.error("Error in web worker: " + event.message, event);
alert("Error occurred in the web worker.");
// Prevents the default handling of the error
event.preventDefault();
};
检查浏览器支持
要检查浏览器对 Web Workers 的支持，可以使用 Modernizr 的 webworkers 功能测试。
示例
以下是检测浏览器中可用 Web Worker 功能支持的语法：
<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script src="/js/modernizr-1.5.min.js">
</script>
<script>
if (Modernizr.webworkers) {
alert("You have web workers support.");
} else {
alert("You do not have web workers support.");
}
</script>
</head>
<body>
<p>
Checking for Browser Support for web workers
</p>
</body>
</html>