回答

SharedWorker 和 WebWorker 都是浏览器提供的 Web API，用于在后台线程执行脚本，避免阻塞主线程。

它们的主要区别如下：

1. 作用域与通信

WebWorker

每个 Worker 实例仅与创建它的单个页面 / 窗口绑定（一对一）。

页面关闭后，Worker 自动终止。

通过 postMessage() 和事件监听（onmessage）通信，数据通过拷贝传递（非共享内存）。

SharedWorker

可被多个同源页面共享（一对多），需通过端口（port）通信。

即使所有页面关闭，Worker 仍可能继续运行（需手动终止）。

多个页面需先连接到同一 Worker 实例，再通过 port.postMessage() 通信。

2. 生命周期

WebWorker

随创建页面的关闭而销毁，适合短期任务。

SharedWorker

独立于单个页面，需通过 worker.port.close() 或 self.close() 手动终止，适合长期共享任务（如实时数据同步）。

3. 适用场景

WebWorker

单页面的计算密集型任务（如大数组处理、加密运算）。

无需多页面协作的后台工作。

SharedWorker

多标签页共享状态（如聊天室、实时通知）。

跨页面资源缓存（如数据库连接池）。

4. 代码示例对比

WebWorker

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('计算');

// worker.js
self.onmessage = (e) => {
// 执行计算
self.postMessage('结果');
};

SharedWorker

// 主线程
const worker = new SharedWorker('shared-worker.js');
worker.port.start(); // 启动端口
worker.port.postMessage('请求数据');

// shared-worker.js
self.onconnect = (e) => {
const port = e.ports[0];
port.onmessage = (e) => {
// 处理请求
port.postMessage('共享数据');
};
};

5. 兼容性

WebWorker：所有现代浏览器支持，IE10+。

SharedWorker：主流浏览器支持（Chrome、Firefox、Safari），但 IE/Edge 不支持。