js实现多线程
在JavaScript中实现多线程通常使用Web Workers API,它允许在后台线程中运行脚本,避免阻塞主线程。以下是具体实现方法:
创建Worker线程
在主线程中,通过new Worker()创建Worker实例,指定脚本路径:
const worker = new Worker('worker.js');
线程间通信
主线程与Worker线程通过postMessage和onmessage进行通信:
主线程发送消息:
worker.postMessage({ command: 'start', data: 42 });
主线程接收消息:
worker.onmessage = function(event) {
console.log('Received:', event.data);
};
Worker线程脚本(worker.js)内容:

self.onmessage = function(e) {
if (e.data.command === 'start') {
const result = heavyComputation(e.data.data);
self.postMessage({ status: 'complete', result });
}
};
function heavyComputation(input) {
// 模拟耗时计算
return input * 2;
}
终止Worker
当不再需要Worker时,应主动终止以释放资源:
worker.terminate();
共享内存(高级用法)
使用SharedArrayBuffer和Atomics可以实现线程间共享内存:
主线程:

const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);
worker.postMessage({ buffer: sharedBuffer });
Worker线程:
let sharedArray;
self.onmessage = function(e) {
if (e.data.buffer) {
sharedArray = new Int32Array(e.data.buffer);
Atomics.add(sharedArray, 0, 1); // 原子操作
}
};
注意事项
Web Workers无法直接操作DOM,所有DOM操作必须通过消息传递回主线程执行。
Worker脚本必须与主页面同源(相同协议/域名/端口)。
大量Worker实例会消耗系统资源,需要合理管理生命周期。
某些API(如LocalStorage)在Worker中不可用,需使用替代方案如IndexedDB。






