当前位置:首页 > JavaScript

js实现并发

2026-04-05 13:07:44JavaScript

JavaScript 实现并发的方法

JavaScript 是单线程语言,但可以通过异步编程和 Web Workers 等技术实现并发效果。

异步编程(Promise/async-await)

使用 Promise 或 async-await 可以模拟并发执行多个异步任务,虽然实际执行仍是单线程,但能有效提高效率。

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

async function concurrentFetch() {
  const [data1, data2] = await Promise.all([
    fetchData('https://api.example.com/data1'),
    fetchData('https://api.example.com/data2')
  ]);
  console.log(data1, data2);
}

Web Workers

Web Workers 允许在后台线程运行脚本,实现真正的多线程并发。

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Start working');
worker.onmessage = (e) => {
  console.log('Message from worker:', e.data);
};

// worker.js
self.onmessage = (e) => {
  console.log('Message from main:', e.data);
  self.postMessage('Work done');
};

SharedArrayBuffer 和 Atomics

对于需要共享内存的高性能计算场景,可以使用 SharedArrayBuffer 配合 Atomics 实现线程间通信。

// 主线程
const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);

const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

// worker.js
self.onmessage = (e) => {
  const sharedArray = new Int32Array(e.data.buffer);
  Atomics.add(sharedArray, 0, 1);
};

并发控制

对于需要限制并发数量的场景,可以使用类似 p-limit 的库或自行实现:

class ConcurrentPool {
  constructor(maxConcurrent) {
    this.max = maxConcurrent;
    this.queue = [];
    this.running = 0;
  }

  async run(task) {
    if (this.running >= this.max) {
      await new Promise(resolve => this.queue.push(resolve));
    }
    this.running++;
    try {
      return await task();
    } finally {
      this.running--;
      if (this.queue.length) this.queue.shift()();
    }
  }
}

浏览器环境下的并发请求

现代浏览器支持同时发起多个 HTTP 请求(通常每个域名 6 个连接),可以利用这个特性实现并发下载。

const urls = ['url1', 'url2', 'url3'];
const promises = urls.map(url => fetch(url));
const responses = await Promise.all(promises);

Node.js 中的集群模式

在 Node.js 中可以通过 cluster 模块实现多进程并发:

js实现并发

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }
} else {
  http.createServer((req, res) => {
    res.end('Hello from worker');
  }).listen(8000);
}

每种方法适用于不同场景,异步编程适合I/O密集型任务,Web Workers适合CPU密集型任务,集群模式适合服务端并发处理。

标签: js
分享给朋友:

相关文章

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

利用js实现

利用js实现

使用 JavaScript 实现 在 JavaScript 中,可以通过多种方式实现功能,具体取决于需求。以下是几种常见的方法: 方法一:使用原生 JavaScript // 示例代码 funct…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…

js sort 实现

js sort 实现

数组排序基础方法 JavaScript 数组的 sort() 方法默认按照字符串 Unicode 码点顺序排序。直接调用时会将元素转为字符串再比较: const arr = [10, 2, 5, 1…