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);
};
在这个例子中，主线程创建了一个新的 Web Worker 对象，并发送消息给它。Web Worker 接收到来自主线程的消息后，在后台线程中进行斐波那契数列的计算，并将计算结果发送回主线程。主线程监听来自 Web Worker 的消息，并将结果打印到控制台。
当您在浏览器中打开 index.html 文件时，打开控制台会看到斐波那契数列的第10项计算结果。这个例子展示了 Web Worker 在后台执行耗时计算任务的能力，从而避免阻塞主线程。
请注意，由于 Web Worker 运行在与主线程分离的上下文中，它们无法直接访问 DOM 或主线程的其他 JavaScript 对象。因此，在 Web Worker 中不能使用 console.log() 打印日志信息，而是需要使用 postMessage() 方法将结果发送回主线程。
标签：主线,Web,Worker,Workers,worker,postMessage,多线程 From： https://www.cnblogs.com/never404/p/17696090.html