js多线程如何简单实现
使用 Web Workers 实现多线程
Web Workers 是浏览器提供的 API，允许在后台线程中运行 JavaScript 代码，避免阻塞主线程。创建一个新的 Worker 只需指定一个脚本文件：
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello Worker' });
worker.onmessage = (event) => {
console.log('Received from worker:', event.data);
};// worker.js
self.onmessage = (event) => {
console.log('Received in worker:', event.data);
self.postMessage({ response: 'Message processed' });
};使用 SharedArrayBuffer 共享内存
通过 SharedArrayBuffer 可以在多个线程间共享内存，配合 Atomics 实现线程安全操作：
// 主线程
const sharedBuffer = new SharedArrayBuffer(16);
const sharedArray = new Int32Array(sharedBuffer);
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });
// worker.js
self.onmessage = (event) => {
const sharedArray = new Int32Array(event.data.buffer);
Atomics.add(sharedArray, 0, 1); // 原子操作
};使用 Service Worker 实现后台处理
Service Worker 主要用于离线缓存和网络代理，但也能执行后台任务：
// 注册 Service Worker
navigator.serviceWorker.register('sw.js').then(registration => {
registration.active.postMessage('Start background task');
});
// sw.js
self.addEventListener('message', (event) => {
// 执行后台任务
});使用 Worker Pool 管理线程池
对于需要大量并行任务的情况，可以创建线程池管理多个 Worker：
class WorkerPool {
constructor(size, workerScript) {
this.workers = Array(size).fill().map(() => new Worker(workerScript));
this.taskQueue = [];
this.workerStatus = Array(size).fill(true);
}
// ... 实现任务分配逻辑
}注意事项
- Worker 中无法直接访问 DOM 或大多数全局对象（如
window） - 通信通过
postMessage进行，数据会被结构化克隆算法处理 - 终止 Worker 使用
worker.terminate() - 考虑使用
Transferable Objects提高大数据传输性能
替代方案：使用异步编程
对于非 CPU 密集型任务，使用 Promise 和 async/await 即可避免阻塞：
async function processData() {
const result = await cpuIntensiveTask();
// 处理结果
}
