当前位置：首页 > JavaScript

js多线程如何简单实现

2026-01-13 14:18:31JavaScript

JavaScript 多线程的简单实现方法

JavaScript 本身是单线程的，但可以通过 Web Workers 实现多线程操作。Web Workers 允许在后台运行脚本，独立于主线程执行任务。

使用 Web Workers 的基本步骤

创建一个独立的 worker 脚本文件（例如 worker.js），在该文件中编写需要在后台运行的代码：

// worker.js
self.onmessage = function(e) {
  const result = e.data * 2; // 示例计算
  postMessage(result);
};

在主线程中创建 worker 实例并与之通信：

js多线程如何简单实现

// 主线程代码
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
  console.log('Worker 返回的结果:', e.data);
};

worker.postMessage(10); // 发送数据给 worker

使用 Blob URL 的替代方法

如果不想创建单独的文件，可以使用 Blob URL 方式：

const workerCode = `
  self.onmessage = function(e) {
    const result = e.data * 2;
    postMessage(result);
  };
`;

const blob = new Blob([workerCode], {type: 'application/javascript'});
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = function(e) {
  console.log('Worker 返回的结果:', e.data);
};

worker.postMessage(10);

注意事项

Web Workers 不能直接操作 DOM，因为它们没有访问主线程 DOM 的权限。worker 和主线程之间的通信通过消息传递机制完成。

js多线程如何简单实现

Worker 中可以执行计算密集型任务，如数据处理、图像处理等，而不会阻塞主线程的 UI 渲染。

终止 Worker

当不再需要 worker 时，应该显式终止它以释放资源：

worker.terminate();

共享 Worker

如果需要多个页面共享同一个 worker，可以使用 SharedWorker：

const sharedWorker = new SharedWorker('shared-worker.js');

sharedWorker.port.onmessage = function(e) {
  console.log('SharedWorker 返回的结果:', e.data);
};

sharedWorker.port.postMessage(10);