Web 应用程序中进行多线程处理-Web Workers

1、什么是Web Workers？

Web Workers API 是一组用于创建并在后台运行脚本的接口，以便在 Web 应用程序中进行多线程处理。它使得可以将一些耗时的计算任务放在单独的线程中执行，从而避免阻塞主线程，提高了应用程序的响应性能。

2、使用方式

以下是 Web Workers API 中常用的接口和方法：

Worker 构造函数：用于创建一个新的 Web Worker 对象，在新的后台线程中执行指定的 JavaScript 文件。

const worker = new Worker('worker.js');

onmessage 事件处理程序：用于在主线程中接收来自 Web Worker 的消息。

worker.onmessage = function(event) {
  // 处理来自 Web Worker 的消息
  console.log('Received message: ', event.data);
};

postMessage() 方法：用于向 Web Worker 发送消息。

worker.postMessage('Hello from main thread!');

onmessage 事件处理程序（Web Worker 内部）：定义在 Web Worker 内部，用于接收来自主线程的消息。

self.onmessage = function(event) {
  // 处理来自主线程的消息
  console.log('Received message in Web Worker: ', event.data);
};

postMessage() 方法（Web Worker 内部）：定义在 Web Worker 内部，用于向主线程发送消息。

self.postMessage('Hello from Web Worker!');

这些是 Web Workers API 中的一些常用接口和方法，可以帮助您在 Web 应用程序中使用多线程处理。请注意，Web Worker 运行在与主线程分离的上下文中，无法直接访问 DOM。它们通常用于执行独立的计算任务或处理大量数据。

3、举个在实际应用中的例子

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <script>
    // 创建 Web Worker
    const worker = new Worker('worker.js');

    // 监听来自 Web Worker 的消息
    worker.onmessage = function(event) {
      // 接收并打印结果
      console.log('Result:', event.data);
    };

    // 向 Web Worker 发送消息，请求计算斐波那契数列的第10项
    worker.postMessage(10);
  </script>
</body>
</html>

worker.js（Web Worker）：

// 定义斐波那契数列的计算函数
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 监听来自主线程的消息
self.onmessage = function(event) {
  const n = event.data;

  // 调用计算函数并返回结果给主线程
  const result = fibonacci(n);
  self.postMessage(result);
};