HTML教程-HTML5 Web Workers

Web Workers 是独立的 JavaScript 代码，在不影响用户界面的情况下在网页后台运行。

什么是 Web Worker？

每个人都希望网站或应用程序能够快速运行，并能同时执行多个操作而不影响页面的性能。然而，有时候在执行一些大型操作时会遇到延迟响应或性能下降的问题。为了解决这个问题，可以使用 Web Workers。

Web Workers 是一种多线程对象，可以并行执行多个 JavaScript，而不影响应用程序或网页的性能。

以下是 Web Workers 的一些关键特点：

Web Workers 是多线程的 JavaScript。
Web Workers 是内核级线程。
Web Workers 需要更多的空间和 CPU 时间。
Web Workers 提高了网站的速度。
Web Workers 在客户端执行代码（而不是在服务器端）。
Web Worker 线程使用 postMessage() 回调方法进行通信。

提示：在使用 HTML Web Workers 之前，您必须了解 JavaScript，因为 Web Worker 依赖于 JavaScript。

Web Workers 的类型：

在 HTML5 中，Web Workers 有两种类型：

Dedicated Web Workers（专用 Web Workers）：

专用的 Worker 只能被调用它的一个脚本访问。当其父线程结束时，专用 Worker 线程也会结束。专用 Worker 只由一个主线程使用。

Shared Web Workers（共享 Web Workers）：

共享的 Worker 可以被多个脚本共享，并且可以使用端口进行通信。如果有不同的窗口、iframe 或 Worker，可以访问共享 Worker。

注意：在本节中，我们将使用专用 Web Workers。

Web Workers 浏览器支持：

在学习 Web Workers 之前，我们需要检查浏览器是否支持。以下是检查浏览器是否支持 Web Workers 的代码。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker API</title>
</head>
<body>
  <h2>检查 Web Workers 的浏览器支持示例</h2>
  <div id="supported"></div>
  <div id="unsupported"></div>
  <button onclick="worker();">点击我</button>
  <script type="text/javascript">
    function worker() {
      if (typeof(Worker) !== "undefined") {
        document.getElementById("supported").innerHTML = "支持该浏览器";
      } else {
        document.getElementById("unsupported").innerHTML = "不支持该浏览器";
      }
    }
  </script>
</body>
</html>

创建 Web Worker 文件：

要创建一个 Web Worker 文件，我们需要创建一个外部 JavaScript 文件。

在这里，我们创建了一个用于计算数字平方的 Web Worker 文件，并将其保存为 "worker.js"。

下面是 "worker.js" 文件的代码：

onmessage = function(event) {
  var num = event.data;
  var sqr = num * num;
  var result = "";
  for (var i = 1; i <= sqr; i++) {
    result = "平方结果是：" + " " + i;
  }
  postMessage(result);
}

创建 Web Worker 对象：

在上述的 "worker.js" 文件中，我们创建了用于 Web Worker 的 JS 文件，现在需要在 HTML 文件中调用它。要创建 Web Worker 对象，您需要调用 Worker() 构造函数。

以下是调用和创建 Web Worker 对象的语法：

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

在 Worker 线程和主线程之间发送消息：

Worker 线程的所有通信都依赖于 postMessage() 方法和 onmessage 事件处理程序。

终止 Web Worker：

如果您想立即终止主线程中正在运行的 Worker，可以调用 Web Worker 的 terminate() 方法来终止它。以下是终止 Web Worker 的语法：

worker.terminate();

Web Worker 也可以在 Worker 线程中通过调用 close() 方法来终止。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1 {
      margin-left: 350px;
    }
  </style>
</head>
<body>
  <!-- 平方输出结果 -->
  <div class="div1">
    <h2>Web Worker 示例</h2>
    <label>输入要求平方的数字</label>
    <br><input type="text" name="num" id="num"><br>
    <br><button id="submit">提交</button>
    <button id="other">等待</button>
    <div id="text"></div>
  </div>
  <script type="text/javascript">
    document.getElementById("other").onclick = function() {
      alert("嘿！Web Worker 正在工作，您可以等待结果。");
    }
    
    // Web Worker 代码.....
    var worker = new Worker("worker.js");
    
    worker.onmessage = function(event) {
      document.getElementById("text").innerText = event.data;
    }
    
    document.getElementById("submit").onclick = function() {
      var num = document.getElementById("num").value;
      worker.postMessage(num);
    }
  </script>
  <p><b>注意：尝试输入一个较大的数字，然后点击其他按钮。页面将正确响应。</b></p>
</body>
</html>

worker.js 文件：

onmessage = function(event) {
  var num = event.data;
  var sqr = num * num;
  var result = "";
  for (var i = 1; i <= sqr; i++) {
    result = "平方结果是：" + " " + i;
  }
  postMessage(result);
}

示例说明：

在上面的示例中的 HTML 文件中，我们使用了以下内容：

var worker = new Worker("worker.js"); 创建 Web Worker 对象。
worker.onmessage = function(event): 用于在主线程和 Worker 线程之间发送消息。
worker.postMessage(num); 这是用于在 Worker 线程和主线程之间通信的方法。使用此方法，Worker 线程将结果返回给主线程。

浏览器支持：

API	Chrome	IE	Firefox	Opera	Safari
Web Workers	是	是	是	是	是