当前位置：首页 > news >正文

Web Worker 线程通信

news 来源：原创 2025/4/26 12:03:27

在 JavaScript 中，Web Worker 允许在后台线程中运行脚本，避免阻塞主线程。主线程与 Worker 线程通过 消息传递 进行通信，数据通过结构化克隆算法复制（非共享内存），以下是完整的通信机制和实践指南：

一、基础通信流程

1. 主线程 → Worker 线程

// 主线程代码
const worker = new Worker('worker.js');// 发送消息
worker.postMessage({ type: 'CALCULATE', data: [1, 2, 3] 
});// 接收消息
worker.onmessage = (event) => {console.log('主线程收到结果:', event.data);
};// 错误处理
worker.onerror = (error) => {console.error('Worker 错误:', error);
};

2. Worker 线程 → 主线程

// worker.js 代码
self.onmessage = (event) => {if (event.data.type === 'CALCULATE') {const result = event.data.data.reduce((a, b) => a + b, 0);// 发送结果回主线程self.postMessage({ result });}
};// 关闭 Worker
self.close(); // Worker 内部主动关闭

二、高级通信技巧

1. 传输大数据优化（Transferable Objects）

避免复制大数组，转移所有权提升性能：

// 主线程发送
const largeBuffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB
worker.postMessage({ buffer: largeBuffer }, [largeBuffer] // 标记可转移对象
);
// 此时主线程不再拥有 largeBuffer 的访问权// Worker 接收
self.onmessage = (event) => {const buffer = event.data.buffer;
};

2. 双向通信 + 请求标识

处理多请求场景：

// 主线程
const requestId = Date.now();
worker.postMessage({ id: requestId, task: 'fetch', url: 'api/data' 
});worker.onmessage = (event) => {if (event.data.id === requestId) {// 处理对应请求的响应}
};

三、通信数据类型支持

通过 postMessage 可传输的数据类型：

基本类型：String、Number、Boolean、null、undefined
复杂类型：Object、Array、Date、RegExp、Blob、File、ImageData
二进制数据：ArrayBuffer、TypedArray、DataView
不支持的类型：Function、DOM 节点、原型链（会被丢弃）

四、错误处理与调试

1. 错误捕获

// Worker 内部错误
self.onerror = (error) => {console.error('Worker 内部错误:', error);return true; // 阻止默认错误冒泡
};// 主线程捕获
worker.onerror = (error) => {console.error('捕获到 Worker 错误:', error);
};

2. Chrome 调试

打开 DevTools → Sources → 找到 Worker 脚本
在 Worker 中设置 debugger 断点

五、关闭 Worker

避免内存泄漏：

// 主线程中终止
worker.terminate(); // 立即停止 Worker// Worker 内部关闭
self.close();

六、共享内存通信（高级）

通过 SharedArrayBuffer 实现线程间共享内存（需处理竞态条件）：

// 主线程
const sharedBuffer = new SharedArrayBuffer(1024);
worker.postMessage({ buffer: sharedBuffer });// Worker 线程
self.onmessage = (event) => {const sharedArray = new Int32Array(event.data.buffer);Atomics.add(sharedArray, 0, 1); // 原子操作
};

七、注意事项

同源策略：Worker 脚本必须与主线程同源
DOM 限制：Worker 无法访问 window、document 等对象
通信成本：频繁小消息建议批量发送
环境差异：Worker 中部分 API（如 WebSocket）行为可能不同

完整示例：质数计算

// 主线程
const worker = new Worker('prime.worker.js');worker.postMessage({ start: 1, end: 1000000 
});worker.onmessage = (event) => {console.log('找到质数数量:', event.data.count);
};// prime.worker.js
self.onmessage = (event) => {const { start, end } = event.data;let count = 0;for (let i = start; i <= end; i++) {if (isPrime(i)) count++;}self.postMessage({ count });
};function isPrime(num) {for (let i = 2; i <= Math.sqrt(num); i++) {if (num % i === 0) return false;}return num > 1;
}