js多线程如何简单实现
使用 Web Workers
Web Workers 是浏览器提供的多线程 API，允许在后台线程中运行 JavaScript 代码，避免阻塞主线程。
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello from main thread' });
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 from worker' });
};使用 SharedArrayBuffer 和 Atomics
对于需要共享内存的多线程场景，可以使用 SharedArrayBuffer 和 Atomics API 进行线程间通信。
// 主线程
const sharedBuffer = new SharedArrayBuffer(1024);
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 Workers
Service Workers 主要用于离线缓存和网络请求拦截，但也可以实现类似多线程的效果。
// 注册 Service Worker
navigator.serviceWorker.register('sw.js').then(registration => {
console.log('Service Worker registered');
});
// sw.js
self.addEventListener('message', event => {
console.log('Message received in Service Worker:', event.data);
});使用 Worker Pool 模式
对于需要大量并行任务的情况，可以创建 Worker 池来管理多个 Worker 实例。
class WorkerPool {
constructor(size, workerScript) {
this.pool = [];
for (let i = 0; i < size; i++) {
this.pool.push(new Worker(workerScript));
}
}
getWorker() {
return this.pool.pop();
}
releaseWorker(worker) {
this.pool.push(worker);
}
}注意事项
浏览器中的多线程与传统的多线程编程有所不同，Worker 线程无法直接访问 DOM，需要通过 postMessage 进行通信。
Worker 脚本必须是与主页面同源的单独文件，不能直接内联在 HTML 中。
对于计算密集型任务，使用 Web Workers 可以显著提高页面响应性能，但线程间通信会有一定开销。
