logo

开发者热搜

前端并发请求数量控制：策略与实现方案详解

作者：蛮不讲李2025.09.26 15:35浏览量：2

简介：本文深入探讨前端并发请求数量控制的必要性，介绍限制并发请求的常见策略，如信号量模式、任务队列、令牌桶算法等，并提供具体实现代码与优化建议。

前端并发请求数量控制：策略与实现方案详解

一、为什么需要控制并发请求数量？

在前端开发中，浏览器对同一域名下的并发请求数量存在限制（通常为6-8个），这是由HTTP协议和浏览器实现机制决定的。当业务场景需要发起大量异步请求时（如批量数据上传、多API并行调用），超出浏览器限制的并发请求会导致：

  1. 请求阻塞：后续请求被强制排队，延长整体响应时间
  2. 资源竞争：CPU/内存占用激增，可能引发页面卡顿
  3. 错误率上升：网络拥塞导致请求超时或失败
  4. 不可预测的行为：不同浏览器的并发限制差异导致表现不一致

典型应用场景包括：

  • 批量文件上传（需控制同时上传的文件数）
  • 数据仪表盘（同时加载多个独立数据源）
  • 微前端架构（子应用独立发起请求）
  • 测试工具模拟高并发场景

二、核心控制策略与实现方案

1. 信号量模式（Semaphore Pattern）

原理：通过计数器跟踪正在执行的请求数，当达到阈值时阻塞新请求。

  1. class RequestSemaphore {
  2.   constructor(maxConcurrent = 5) {
  3.     this.maxConcurrent = maxConcurrent;
  4.     this.activeCount = 0;
  5.     this.queue = [];
  6.   }
  8.   async execute(requestFn) {
  9.     if (this.activeCount >= this.maxConcurrent) {
  10.       return new Promise((resolve) => {
  11.         this.queue.push({ requestFn, resolve });
  12.       });
  13.     }
  15.     this.activeCount++;
  16.     try {
  17.       const result = await requestFn();
  18.       this._dequeue();
  19.       return result;
  20.     } catch (error) {
  21.       this._dequeue();
  22.       throw error;
  23.     }
  24.   }
  26.   _dequeue() {
  27.     this.activeCount--;
  28.     if (this.queue.length > 0) {
  29.       const { requestFn, resolve } = this.queue.shift();
  30.       resolve(this.execute(requestFn));
  31.     }
  32.   }
  33. }
  35. // 使用示例
  36. const semaphore = new RequestSemaphore(3);
  37. const mockRequest = (id) => () => 
  38.   new Promise(resolve => 
  39.     setTimeout(() => resolve(`Response ${id}`), 1000)
  40.   );
  42. // 并发执行5个请求，但实际同时只有3个在运行
  43. for (let i = 1; i <= 5; i++) {
  44.   semaphore.execute(mockRequest(i)).then(console.log);
  45. }

优化点：

  • 添加超时机制防止队列堆积
  • 支持优先级队列（紧急请求优先）
  • 添加请求取消功能

2. 任务队列模式（Task Queue）

原理：将所有请求放入队列，按固定批次执行。

  1. class BatchRequestQueue {
  2.   constructor(batchSize = 3, batchInterval = 0) {
  3.     this.batchSize = batchSize;
  4.     this.batchInterval = batchInterval;
  5.     this.queue = [];
  6.     this.timer = null;
  7.   }
  9.   add(requestFn) {
  10.     this.queue.push(requestFn);
  11.     if (!this.timer && this.queue.length >= this.batchSize) {
  12.       this._processBatch();
  13.     } else if (this.batchInterval > 0 && !this.timer) {
  14.       this.timer = setTimeout(() => this._processBatch(), this.batchInterval);
  15.     }
  16.   }
  18.   async _processBatch() {
  19.     const batch = this.queue.splice(0, this.batchSize);
  20.     const results = await Promise.all(batch.map(fn => fn()));
  21.     // 处理结果...
  22.     if (this.queue.length > 0 && !this.timer) {
  23.       this.timer = setTimeout(() => this._processBatch(), this.batchInterval);
  24.     }
  25.   }
  26. }

适用场景：

  • 需要严格控制请求发起节奏
  • 请求间无强依赖关系
  • 批量处理效率更高

3. 令牌桶算法（Token Bucket）

原理：以固定速率生成令牌，每个请求需要消耗一个令牌。

  1. class TokenBucket {
  2.   constructor(capacity = 5, refillRate = 1) {
  3.     this.capacity = capacity;
  4.     this.tokens = capacity;
  5.     this.refillRate = refillRate; // tokens per second
  6.     this.lastRefillTime = Date.now();
  7.     this.queue = [];
  8.   }
  10.   _refill() {
  11.     const now = Date.now();
  12.     const elapsed = (now - this.lastRefillTime) / 1000;
  13.     const newTokens = elapsed * this.refillRate;
  14.     this.tokens = Math.min(this.capacity, this.tokens + newTokens);
  15.     this.lastRefillTime = now;
  16.   }
  18.   async consume() {
  19.     this._refill();
  20.     if (this.tokens >= 1) {
  21.       this.tokens -= 1;
  22.       return Promise.resolve();
  23.     }
  25.     return new Promise(resolve => {
  26.       this.queue.push(resolve);
  27.       const checkTokens = () => {
  28.         this._refill();
  29.         if (this.tokens >= 1 && this.queue.length > 0) {
  30.           this.tokens -= 1;
  31.           const resolveFn = this.queue.shift();
  32.           resolveFn();
  33.         } else {
  34.           setTimeout(checkTokens, 100);
  35.         }
  36.       };
  37.       setTimeout(checkTokens, 100);
  38.     });
  39.   }
  40. }
  42. // 使用示例
  43. const bucket = new TokenBucket(3, 0.5); // 初始3个令牌，每秒补充0.5个
  44. async function makeRequest() {
  45.   await bucket.consume();
  46.   return fetch('https://api.example.com/data');
  47. }

优势：

  • 平滑突发流量
  • 精确控制请求速率
  • 避免全局阻塞

三、进阶优化技巧

1. 请求优先级管理

  1. class PriorityRequestQueue {
  2.   constructor(maxConcurrent = 3) {
  3.     this.maxConcurrent = maxConcurrent;
  4.     this.activeCount = 0;
  5.     this.highPriorityQueue = [];
  6.     this.lowPriorityQueue = [];
  7.   }
  9.   async add(requestFn, isHighPriority = false) {
  10.     const queue = isHighPriority ? this.highPriorityQueue : this.lowPriorityQueue;
  11.     queue.push(requestFn);
  12.     this._processQueue();
  13.   }
  15.   async _processQueue() {
  16.     if (this.activeCount >= this.maxConcurrent) return;
  18.     let nextRequest;
  19.     if (this.highPriorityQueue.length > 0) {
  20.       nextRequest = this.highPriorityQueue.shift();
  21.     } else if (this.lowPriorityQueue.length > 0) {
  22.       nextRequest = this.lowPriorityQueue.shift();
  23.     }
  25.     if (nextRequest) {
  26.       this.activeCount++;
  27.       try {
  28.         const result = await nextRequest();
  29.         this.activeCount--;
  30.         this._processQueue();
  31.         return result;
  32.       } catch (error) {
  33.         this.activeCount--;
  34.         this._processQueue();
  35.         throw error;
  36.       }
  37.     }
  38.   }
  39. }

2. 动态调整并发数

根据网络状况动态调整并发数：

  1. function detectNetworkCondition() {
  2.   return new Promise(resolve => {
  3.     const startTime = performance.now();
  4.     const img = new Image();
  5.     img.onload = () => {
  6.       const duration = performance.now() - startTime;
  7.       if (duration < 100) resolve('fast'); // 快速网络
  8.       else if (duration < 500) resolve('medium'); // 中等网络
  9.       else resolve('slow'); // 慢速网络
  10.     };
  11.     img.src = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz4=`;
  12.   });
  13. }
  15. async function getAdaptiveConcurrency() {
  16.   const network = await detectNetworkCondition();
  17.   const map = { fast: 10, medium: 5, slow: 2 };
  18.   return map[network] || 3;
  19. }

3. 请求重试机制

  1. async function retryableRequest(requestFn, maxRetries = 3) {
  2.   let lastError;
  3.   for (let i = 0; i <= maxRetries; i++) {
  4.     try {
  5.       return await requestFn();
  6.     } catch (error) {
  7.       lastError = error;
  8.       if (i === maxRetries) throw error;
  9.       await new Promise(resolve => 
  10.         setTimeout(resolve, 1000 * Math.pow(2, i)) // 指数退避
  11.       );
  12.     }
  13.   }
  14.   throw lastError;
  15. }

四、最佳实践建议

  1. 合理设置初始并发数：

    • 移动端建议2-4个
    • 桌面端建议4-8个
    • 通过navigator.connection.effectiveType检测网络类型动态调整

  2. 请求分类管理：

    • 关键路径请求优先
    • 非关键请求延迟或合并

  3. 监控与调优：

    1. function monitorRequests() {
    2.   const performanceObserver = new PerformanceObserver((list) => {
    3.     for (const entry of list.getEntries()) {
    4.       if (entry.name.includes('fetch')) {
    5.         console.log(`Request ${entry.name} took ${entry.duration}ms`);
    6.       }
    7.     }
    8.   });
    9.   performanceObserver.observe({ entryTypes: ['resource'] });
    10. }

  4. 与后端协同：

    • 通过HTTP头X-Request-ID追踪请求
    • 协商合理的批处理接口

  5. 渐进增强策略：

    1. async function smartFetch(url, options = {}) {
    2.   const supportsConcurrent = 'signal' in new Request('');
    3.   if (supportsConcurrent && options.concurrency) {
    4.     return usingConcurrentStrategy(url, options);
    5.   }
    6.   return fallbackFetch(url, options);
    7. }

五、常见误区与解决方案

  1. 误区：认为Promise.all()可以控制并发
    事实：它只是等待所有Promise完成，不限制同时执行的Promise数量
    解决方案：使用上述控制策略包装Promise.all()

  2. 误区：设置过高的并发数可以提升性能
    事实：超过浏览器限制会导致请求排队，反而降低性能
    解决方案：通过真实用户监控(RUM)确定最优并发数

  3. 误区：忽略请求取消功能
    事实：用户导航离开页面时，未完成的请求会浪费资源
    解决方案：使用AbortController实现请求取消

  1. class CancellableRequestQueue {
  2.   constructor(maxConcurrent = 3) {
  3.     this.maxConcurrent = maxConcurrent;
  4.     this.activeRequests = new Set();
  5.   }
  7.   async add(requestFn) {
  8.     if (this.activeRequests.size >= this.maxConcurrent) {
  9.       throw new Error('Queue full');
  10.     }
  12.     const controller = new AbortController();
  13.     const signal = controller.signal;
  15.     this.activeRequests.add(controller);
  16.     try {
  17.       const result = await requestFn({ signal });
  18.       this.activeRequests.delete(controller);
  19.       return result;
  20.     } catch (error) {
  21.       if (error.name !== 'AbortError') {
  22.         this.activeRequests.delete(controller);
  23.       }
  24.       throw error;
  25.     }
  26.   }
  28.   cancelAll() {
  29.     this.activeRequests.forEach(ctrl => ctrl.abort());
  30.     this.activeRequests.clear();
  31.   }
  32. }

六、未来演进方向

  1. Web Streams API：

    • 使用ReadableStream处理大数据流，减少内存占用
    • 示例：分块上传文件时控制并发块数量

  2. Service Worker中介：

    • 在Service Worker层统一控制请求并发
    • 实现跨标签页的请求协调

  3. HTTP/2多路复用：

    • 虽然HTTP/2允许单个连接多路复用，但仍需控制应用层并发
    • 结合Server Push优化关键资源加载

  4. WebTransport提案：

    • 为需要低延迟的场景提供更细粒度的控制

通过系统化的并发请求控制，前端应用可以在保证用户体验的同时，更高效地利用网络资源。建议开发者根据具体业务场景，选择或组合适合的控制策略，并通过持续监控不断优化参数设置。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询