当前位置:首页 > 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 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数:…