当前位置：首页 > JavaScript

js多线程如何简单实现

2026-04-03 19:10:51JavaScript

使用 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);
  }
}