如何确定Web Worker已经创建或关闭

最新推荐文章于 2024-04-26 22:58:10 发布

acgCode

最新推荐文章于 2024-04-26 22:58:10 发布

阅读量3.5k

点赞数 2

分类专栏： # JavaScript 前端文章标签： javascript html5

本文链接：https://blog.csdn.net/sayUonly/article/details/118540307

版权

前端同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

Web Worker 可以为 JavaScript 创建多线程环境，可以将一部分任务分配给分线程处理，从而不阻塞主线程的运行。通过 Web Worker 创建的分线程和主线程是同时运行互不干扰的。具体的Web Worker的相关知识，大家可以参考阮一峰大神的博客。

Web Worker 在使用过程中需要注意的是分线程创建之后，为了随时响应主线程的通信会始终运行在后台。所以 Worker 是比较消耗资源的，且不会自动关闭。

当然为了解决这个问题 Web Worker 为我们提供了手动关闭的方法，那么怎么确定 Worker 当前的状态呢？我们需要借用 Chrome 的开发者工具进行确认。

首先先上一段代码：

<!--
 * @Description: html5 的 Web Workers
 * @FilePath: /JavaScript基础/WebWorker/index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Worker</title>
  </head>
  <body>
    <input type="text" name="number" id="number" />
    <button id="btn">计算</button>
    <script>
      var input = document.querySelector("#number");
      document.querySelector("#btn").onclick = function () {
        var number = input.value;

        var anotherWorker = new Worker("anotherWorker.js");
        anotherWorker.onmessage = function (event) {
          console.log(event.data);
        };
        anotherWorker.postMessage("向anotherWorker发送信息");
      };
    </script>
  </body>
</html>

/*
 * @FilePath: /JavaScript基础/WebWorker/anotherWorker.js
 */
(function () {
  this.onmessage = function (event) {
    console.log(event.data);
    postMessage("anotherWorker 返回数据");
  };
})();

执行效果如下：
在这里插入图片描述

此时，在 Chrome 的开发者工具的 Sources 标签下的 Page 树是这个样子的：
在这里插入图片描述
这个红框就是我们创建的 Worker。

多次调用后我们发现：
在这里插入图片描述
新的 Worker 在不断创建，旧的 Worker 也不会自动关闭。这样会造成资源的浪费。那么，就需要我们手动关闭 Worker。

我们先给 Worker 增加一个close()。

/*
 * @FilePath: /JavaScript基础/WebWorker/anotherWorker.js
 */
(function () {
  this.onmessage = function (event) {
    console.log(event.data);
    postMessage("anotherWorker 返回数据");

    this.close(); // 在分线程返回数据后关闭这个 Worker
  };
})();

运行效果如下：
Worker正常运行
Worker 正常运行。
在这里插入图片描述
从 Sources 标签下的 Page 树中可以看到，这些 Worker 在数据返回后被彻底关闭了。

当然，你也可以在主线程的回调里关闭 Worker，效果是一样的。时机不同，按需取用。

var anotherWorker = new Worker("anotherWorker.js");
anotherWorker.onmessage = function (event) {
  console.log(event.data);

  anotherWorker.terminate(); // 在主线程关闭 Worker
};
anotherWorker.postMessage("向anotherWorker发送信息");

总结一下：

Worker 不能自动关闭，需要我们手动关闭
Worker 可以在分线程通过self.close()进行关闭，也可以在主线程通过worker.terminate()进行关闭
我们可以通过 Chrome 和开发者工具中的 Sources 标签下的 Page 树来观察 Worker 的状态，以确定 Worker 是否被成功创建/关闭。