HTML - Web Workers API

上一页
下一页

HTML Web Workers API 是一个 JavaScript 特性，用于在后台的单独线程中运行计算密集型任务，而不会中断用户界面。

在本 Web Workers API 章节中，您将学习以下主题

什么是 Web Workers？

  • Web Workers 允许执行长时间任务而不会让页面失去响应。
  • Web Workers 是后台脚本，它们相对重量级，不适合大量使用。例如，为四百万像素图像的每个像素启动一个工作线程是不合适的。
  • 当脚本在 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 进行初始化，该文件包含工作线程将执行的代码。此代码设置事件监听器并与从主页面生成的脚本通信。以下是简单的语法

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 事件进行访问。以下是将生成 Web Worker 来执行循环并返回变量 j 的最终值的主页面 (hello.htm)

示例

<!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 将不再响应消息或执行任何其他计算。我们无法重新启动工作线程；相反，我们需要使用相同的 URL 创建一个新的工作线程。

处理 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.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>
打印页面
上一页
下一页
广告