Web Workers是HTML5提供的后台线程API，允许JavaScript在独立线程执行耗时任务，避免阻塞主线程。通过postMessage通信，支持Dedicated、Shared和Service Worker三种类型，结合SharedArrayBuffer可实现内存共享与同步，提升多核CPU利用率，增强应用性能与响应性。
JavaScript 一直是单线程语言，依靠事件循环和异步机制处理并发任务。但在处理大量计算时，主线程容易被阻塞，导致页面卡顿。Web Workers 提供了一种在后台线程中运行脚本的方式，从而实现真正的并行执行，提升性能。
什么是 Web Workers？
Web Workers 是 HTML5 引入的浏览器 API，允许 JavaScript 在独立于主线程的后台线程中运行。这意味着你可以把耗时的任务（如数据处理、复杂计算）交给 Worker，避免阻
塞用户界面。
Worker 线程不能访问 DOM，也不能使用 window 对象，但可以使用部分全局对象，如 self、setTimeout、fetch 等。
创建和使用 Web Worker
要使用 Web Worker，你需要创建一个单独的 JavaScript 文件，作为 Worker 的脚本文件。
例如，创建一个名为 worker.js 的文件：
self.onmessage = function(e) {
const data = e.data;
let result = 0;
for (let i = 0; i < data; i++) {
result += i;
}
self.postMessage(result);
};
在主脚本中启动 Worker：
const worker = new Worker('worker.js');
worker.postMessage(1000000); // 发送数据
worker.onmessage = function(e) {
console.log('计算结果:', e.data);
};
通过 postMessage 发送消息，通过监听 onmessage 接收结果。通信是基于事件和消息传递的，数据是复制而非共享。
SharedArrayBuffer 与更高级的并发控制
虽然普通 Worker 之间不能共享内存，但通过 SharedArrayBuffer 可以实现主线程与 Worker 之间的内存共享。配合 Atomics 操作，可以实现线程间同步。
这适用于需要频繁交换大量数据的场景，比如音视频处理或科学计算。
示例：
// 主线程
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray[0] = 0;
const worker = new Worker('atomic-worker.js');
worker.postMessage(sharedArray);
Atomics.wait(sharedArray, 0, 0);
console.log('最终值:', sharedArray[0]);
// atomic-worker.js
self.onmessage = function(e) {
const arr = e.data;
Atomics.add(arr, 0, 100);
Atomics.notify(arr, 0, 1);
};
注意：SharedArrayBuffer 在某些浏览器中默认受限，需启用跨源隔离（Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy）才能使用。
Worker 类型与适用场景
- Dedicated Worker：专用于创建它的脚本，最常见。
- Shared Worker：可被多个脚本（如多个窗口、iframe）共享，通信通过 Port 对象。
- Service Worker：用于网络代理、缓存、推送通知等，生命周期独立。
选择合适的类型取决于你的应用需求。大多数计算密集型任务使用 Dedicated Worker 即可。
基本上就这些。Web Workers 让 JavaScript 能有效利用多核 CPU，虽不是传统意义上的“多线程编程”，但通过消息传递模型实现了安全的并发处理。合理使用，能显著提升应用响应性和用户体验。
