初识 web workers

web workers 简介

Web Workers 是 HTML5 新增的一项 API，它允许在后台线程中运行 JavaScript 代码，从而避免阻塞主线程并提高 Web 应用程序的响应性能。通过将计算密集型任务（如大量数据的处理）放在 Worker 线程中，可以使 Web 应用程序更加流畅和快速响应用户操作。

• Web Workers 是运行在主线程之外的 JavaScript 线程，可以执行计算密集型操作、长时间运行的代码或其他繁重的任务。

• Web Workers 使用 postMessage() 方法与主线程通信，并使用 onmessage 事件侦听器接收来自主线程的消息。

• 通过调用 Worker() 构造函数可以创建一个新的 Web Worker，该构造函数需要传递一个 JavaScript 文件路径或者直接传递一个字符串形式的 JavaScript 代码。

• 在 Web Worker 中无法访问 DOM，因为它们运行在不同的上下文环境中。但是，Web Workers 可以通过 XMLHttpRequest 和 fetch 与服务器进行通信。

• 多个 Web Workers 可以同时运行，它们互相独立且不能共享内存。如果多个 Web Workers 需要共享数据，则必须使用 postMessage() 方法将数据从一个 Web Worker 发送到另一个 Web Worker。

• Web Workers 可以通过 terminate() 方法终止运行，也可以通过 close() 方法关闭与它们的通信通道。

• 如果需要使用 Web Workers 来处理较大的数据集合，那么可以考虑使用 SharedArrayBuffer 和 Atomics API 来实现更高效的数据共享和同步。

创建一个 web Workers

1、在 HTML 文件中引入一个 JavaScript 文件，该文件将会创建 Web Worker：

DOCTYPE html>
html>
  head>
    title>Web Workers Demotitle>
  head>
  body>
    script src="worker.js">script>
    script>
      // 创建一个新的 Web Worker
      const worker = new Worker('worker.js');

      // 向 Web Worker 发送消息
      worker.postMessage('Hello, worker!');

      // 监听 Web Worker 返回的消息
      worker.onmessage = function (event) {
        console.log('Received message from worker:', event.data);
      };
    script>
  body>
html>

2、在 worker.js 文件中编写 Web Worker 的代码

// 接收来自主线程的消息
self.onmessage = function (event) {
  console.log('Received message in worker:', event.data);

  // 执行一些计算密集型操作
  const result = doSomeWork();

  // 将结果发送回主线程
  self.postMessage(result);
};

// 模拟一个计算密集型操作
function doSomeWork() {
  let sum = 0;
  for (let i = 0; i  1000000000; i++) {
    sum += i;
  }
  return sum;
}

使用示例

以下是一个使用 Web Workers 的简单 demo，它计算从 1 到给定数字之间所有整数的和，同时不会阻塞主线程：
在 HTML 文件中插入以下代码：

DOCTYPE html>
html>
  head>
    title>Web Worker Demotitle>
    script>
      function calculateSum() {
        // 获取用户输入的数字
        const number = parseInt(document.getElementById('number').value);

        // 创建一个新的Web Worker对象
        const worker = new Worker('sum_worker.js');

        // 设置消息监听器，以便在计算完成时接收结果
        worker.addEventListener('message', (event) => {
          document.getElementById('result').textContent = event.data;
        });

        // 向Web Worker发送消息，启动计算
        worker.postMessage(number);
      }
    script>
  head>
  body>
    label for="number">请输入一个数字：label>
    input type="number" id="number" />
    button onclick="calculateSum()">计算总和button>
    p id="result">p>
  body>
html>

在同一目录下创建一个名为 sum_worker.js 的 JavaScript 文件，包含以下代码：

// 监听消息事件
self.addEventListener('message', (event) => {
  // 获取传递过来的数字
  const number = event.data;

  // 计算总和
  let sum = 0;
  for (let i = 1; i  number; i++) {
    sum += i;
  }

  // 发送计算结果回主线程
  self.postMessage(sum);
});

现在你可以在浏览器中打开这个 HTML 文件，输入一个数字，并点击“计算总和”按钮。Web Worker 将开始计算总和，而主线程不会被阻塞，你可以在页面上做其他的事情。一旦计算完成，Web Worker 将发送消息回主线程，显示计算结果。

关闭 worker

Worker 在不断创建，旧的 Worker 也不会自动关闭。这样会造成资源的浪费。那么，就需要我们手动关闭 Worker。
我们先给 Worker 增加一个 close()。在 worker 里的任务执行成功后主动关闭 worker

self.close();

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net