HTML - Web Workers API

HTML Web Worker（工作线程）用于在单独的线程中在后台运行计算成本高昂的任务，而不会中断用户界面。

什么是 Web Workers？

Web Workers 允许在不屈服的情况下执行长任务以保持页面无响应。
Web Worker 是后台脚本，它们相对重量级，不适合大量使用。例如，为四百万像素图像的每个像素启动一个工作线程是不合适的。
当脚本在 Web Worker 中执行时，它无法访问网页的窗口对象（window.document）。
Web Worker 无法直接访问网页和 DOM API。尽管 Web Worker 无法阻止浏览器 UI，但它们仍会消耗 CPU 周期并使系统响应速度降低。

Web Workers 的需求是什么？

JavaScript 被设计为在单线程环境中运行，这意味着多个脚本不能同时运行。考虑需要处理 UI 事件、查询和处理大量 API 数据以及操作 DOM 的情况。 JavaScript 将在 CPU 使用率高的情况下挂起您的浏览器。

让我们举一个简单的例子，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 Worker来处理，它将在不中断用户界面的情况下完成所有计算成本高昂的任务，并且通常在单独的线程上运行。

Web Workers 如何工作？

Web Worker 使用 JavaScript 文件的 URL 进行初始化，该文件包含 Worker 将执行的代码。此代码设置事件侦听器，并与从主页生成事件的脚本进行通信。以下是简单的语法：


 var worker = new Worker('bigLoop.js');

如果指定的 JavaScript 文件存在，浏览器将生成一个新的工作线程，该线程是异步下载的。如果工作线程的路径返回 404 错误，则工作线程将以静默方式失败。

如果我们的应用程序有多个支持的 JavaScript 文件，我们可以使用 importScripts（） 方法导入它们，该方法将文件名作为参数，用逗号分隔，如下所示：


 importScripts("helper.js", "anotherHelper.js");

生成 Web Worker 后，Web Worker 与其父页面之间的通信将使用 postMessage（） 方法完成。根据浏览器/版本，postMessage（） 方法可以接受字符串或 JSON 对象作为其单个参数。

Web Worker 传递的消息使用主页中的 onmessage 事件进行访问。下面是主页（你好.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（）' 发布，然后使用 'worker.onmessage = function（event） {}' 的事件属性在你好.htm 接收该变量

停止 Web Worker

Web Workers 不会自行停止，但启动它们的页面可以通过调用 terminate（）方法来停止它们。


 worker.terminate();

终止的 Web Worker 将不再响应消息或执行任何其他计算。我们无法重新启动工人;相反，我们需要使用相同的 URL 创建一个新工作线程。

处理错误

下面显示了 Web 辅助角色 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>

检查浏览器支持

以下是用于检测浏览器中可用的 Web 辅助角色功能支持的语法：


<!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>

打印本页