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

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

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

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

首先先上一段代码:



<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 Workertitle>
  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 树是这个样子的:
如何确定Web Worker已经创建或关闭_第1张图片
这个红框就是我们创建的 Worker。

多次调用后我们发现:
如何确定Web Worker已经创建或关闭_第2张图片
新的 Worker 在不断创建,旧的 Worker 也不会自动关闭。这样会造成资源的浪费。那么,就需要我们手动关闭 Worker。

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

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

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

运行效果如下:
如何确定Web Worker已经创建或关闭_第3张图片
Worker 正常运行。
如何确定Web Worker已经创建或关闭_第4张图片
从 Sources 标签下的 Page 树中可以看到,这些 Worker 在数据返回后被彻底关闭了。

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

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

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

总结一下:

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

你可能感兴趣的:(#,JavaScript,前端,javascript,html5)