当前位置：首页 > JavaScript

js实现多线程

2026-03-01 04:44:02JavaScript

JavaScript 多线程实现方法

JavaScript 本身是单线程语言，但可以通过 Web Workers、Service Workers 或 SharedArrayBuffer 等技术实现类似多线程的效果。

js实现多线程

Web Workers

Web Workers 允许在后台线程中运行脚本，避免阻塞主线程。创建一个新的 Worker 实例，通过 postMessage 和 onmessage 进行通信。

js实现多线程

// 主线程代码
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);
};