js实现多线程
JavaScript 多线程实现方法
JavaScript 本身是单线程语言，但可以通过 Web Workers、Service Workers 或 SharedArrayBuffer 等技术实现类似多线程的效果。
Web Workers
Web Workers 允许在后台线程中运行脚本，避免阻塞主线程。创建一个新的 Worker 实例，通过 postMessage 和 onmessage 进行通信。
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello Worker' });
worker.onmessage = (event) => {
console.log('Message from worker:', event.data);
};
// worker.js
self.onmessage = (event) => {
console.log('Message from main thread:', event.data);
self.postMessage({ data: 'Hello Main Thread' });
};Service Workers
Service Workers 主要用于离线缓存和网络请求拦截，但也可以用于后台任务处理。注册一个 Service Worker 并监听事件。
// 主线程注册
navigator.serviceWorker.register('sw.js').then(() => {
console.log('Service Worker registered');
});
// sw.js
self.addEventListener('install', (event) => {
console.log('Service Worker installed');
});SharedArrayBuffer
SharedArrayBuffer 允许多个线程共享同一块内存，适用于高性能计算场景。需要配合 Web Workers 使用。
// 主线程
const sharedBuffer = new SharedArrayBuffer(1024);
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });
// worker.js
self.onmessage = (event) => {
const sharedBuffer = event.data.buffer;
const sharedArray = new Int32Array(sharedBuffer);
Atomics.add(sharedArray, 0, 1);
};注意事项
- Web Workers 无法直接操作 DOM，需通过消息传递与主线程交互。
- Service Workers 主要用于网络请求处理，生命周期由浏览器控制。
- SharedArrayBuffer 需要服务器设置特定的 HTTP 头（如
COOP和COEP）才能启用。
以上方法可以根据实际需求选择，Web Workers 是最常用的多线程解决方案。
