初识 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();

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