JavaScript - Worker API

Web Worker API

worker API 是一个 Web API，它允许我们在后台线程中运行 JavaScript 代码。每当网页在浏览器中加载时，它都会在浏览器中每个 <script> 标签加载完成后才可进行交互。Web Workers 允许用户与网页进行交互，而无需在浏览器中加载整个 JavaScript 代码。这会增加网页的响应时间。

创建 Web Worker 文件

要创建 Web Worker，您需要在外部文件中编写一个脚本，然后在另一个文件中执行该脚本。

文件名应以".js"为扩展名。

在下面的 JavaScript 代码中，我们定义了 counter() 函数。我们在函数中使用了 setTimeout() 方法，每隔 1000 毫秒调用一次 counter() 函数。

代码中最重要的部分是 postMessage() 方法。它用于在主线程中发送数据。

function counter() {
    postMessage(data); // 向主线程发送数据
    setTimeout("counter()", 1000);
}
counter();

检查 Web Worker 支持

在创建 Web Worker 之前，您应该检查您的浏览器是否支持 Web Worker。您可以使用 typeof 运算符来检查。

if (typeof(Worker) !== "undefined") {
    //"您的浏览器支持 Web Worker!";
} else {
    //"您的浏览器不支持 Web Worker!";
}

创建 Web Worker 对象

创建外部 JavaScript 文件后，您需要通过将外部 JavaScript 文件的路径作为参数传递来创建一个新的 Worker 对象，如下所示。

const workerObj = new Worker("testWorker.js");

要从 Worker 文件中获取我们使用 postMessage() 方法发送的主线程消息，您可以使用 Worker 对象上的 'onmessage' 事件，如下所示。

workerObj.onmessage = function(e) {
    // 使用 event.data
};

终止 Web Worker 的执行

当您启动 Web Worker 脚本的执行时，它会一直执行，直到您终止执行为止。

您可以使用terminate() 方法终止 Web Worker 的执行，如下所示。

workerObj.terminate();

示例:完整的 Web Worker 程序

文件名:index.html

在下面的代码中，我们定义了 startWorker() 和 stopWorker() 函数来启动和停止 Worker 的执行。

在 startWorker() 函数中，我们首先检查浏览器是否支持 Worker。然后，我们检查是否有 Worker 实例正在运行。如果没有，我们将使用外部文件中定义的脚本创建一个新的 Worker 对象实例。

之后，我们在 Worker 对象上添加了 onmessage 事件。这样，每当它从外部脚本文件获取数据时，它都会打印数据并执行其他操作。

在 stopWorker() 函数中，我们使用 workerObj 对象的 Terminate() 方法终止 Worker 的执行。

<html>
<body>
<button onclick = "startWorker()"> Start Counter </button>
<button onclick = "stopWorker()"> Stop Counter </button>
<div id = "output"></div>
<script>
   let output = document.getElementById('output');
   let workerObj;
   function startWorker() {
      if (typeof (Worker) !== "undefined") {
         if (typeof workerObj === "undefined") {
            workerObj = new Worker("app.js");
            workerObj.onmessage = function (event) {//从 Web Worker 获取消息
               output.innerHTML += "Event data is: " + event.data + "<br>";
            };
         }
      } else {
         output.innerHTML += "Web worker is not supported by your browser.";
      }
   }
   function stopWorker() { // 停止 Web Worker。
      if (typeof workerObj !== "undefined") {
         workerObj.terminate();
         workerObj = undefined;
      }
   }
</script>
</body>
</html>

文件名:- app.js

在下面的代码中，我们定义了 counter() 函数。在 counter() 函数中，我们使用 setTimeOut() 方法每秒调用一次 counter() 函数。它还使用 postMessage() 方法将数据发送到主线程。

var i = 0;
function timedCount() {
   i = i + 1;
   postMessage(i);
   setTimeout("timedCount()",500);
}
timedCount();

输出

要运行上述代码，您需要确保 index.html 和 app.js 文件位于实时 Web 服务器上。您也可以使用 localhost。另外，请确保在 index.html 文件中的 Worker 对象中添加 app.js 文件的正确路径。

您还可以在同一个文件中使用多个 Worker 在后台运行多个脚本。

Web Worker 用例

上面的示例比较简单，在这种情况下您不需要使用 Web Worker，但这仅用于演示。

以下是 Web Worker 的实际用例。

• 当您需要执行大型或复杂的数学脚本时

• 在 HTML 游戏中，您可以使用 Web Worker

• 如果您想提高网站性能

• 在并行下载中，当您需要执行多个线程

• 用于后台数据同步

• 用于机器学习

• 用于生成报告

• 用于处理音频和视频

Web Workers 和 DOM

由于您需要在外部文件中定义 Web Workers 的脚本，因此您无法在外部文件中使用以下对象。

• window 对象

• document 对象

• parent 对象

但是，您可以在 Web Workers 中使用以下对象。

• location 对象

• navigator 对象

• 应用程序缓存

• 使用 importScripts() 导入外部脚本

• XMLHttpRequest