前端的防并发是什么意思？

90后晨仔
37 阅读4分钟

在前端开发中，“防并发” 通常指的是通过技术手段 控制并发请求的数量，避免浏览器或服务器因同时处理大量请求而出现性能瓶颈、资源竞争或崩溃等问题。以下是详细解释：

一、为什么需要防并发？

  1. 服务器压力过大
    • 如果前端一次性发送大量请求，服务器可能因资源耗尽而响应变慢甚至崩溃。
  2. 用户体验下降
    • 过多的并发请求可能导致页面卡顿、加载缓慢，影响用户操作体验。
  3. 浏览器限制
    • 浏览器对同一域名的并发请求数有限制（通常为6-8个），超出后请求会排队等待，导致延迟。
  4. 资源浪费
    • 未加控制的并发请求可能导致网络带宽和服务器资源的浪费。

二、前端防并发的核心策略

1. 控制并发请求数量

通过队列机制或异步控制工具，限制同时执行的请求数量。

  • 实现方式：
    • 队列管理：将请求放入队列，按最大并发数依次执行。
    • 代码示例（使用 Promise 队列）： 
      class ConcurrencyLimiter {
  constructor(maxConcurrency) {
    this.maxConcurrency = maxConcurrency;
    this.queue = [];
    this.activeCount = 0;
  }

  async enqueue(task) {
    await new Promise((resolve) => {
      this.queue.push(resolve);
      if (this.activeCount < this.maxConcurrency) {
        this.dequeue();
      }
    });

    await task();
    this.activeCount--;
    this.dequeue();
  }

  dequeue() {
    if (this.queue.length > 0 && this.activeCount < this.maxConcurrency) {
      this.activeCount++;
      const resolve = this.queue.shift();
      resolve();
    }
  }
}

// 使用示例
const limiter = new ConcurrencyLimiter(5); // 最大并发数为5
const urls = ['url1', 'url2', ..., 'url100'];

urls.forEach(url => {
  limiter.enqueue(() => fetch(url));
});
    • 第三方库：
      • p-limit（轻量级并发控制库）
      • axios 的拦截器（控制并发请求）

2. 分批处理请求

将大量请求分成小批次，逐批执行。

  • 代码示例： 
    async function fetchWithConcurrency(urls, batchSize) {
  const results = [];
  for (let i = 0; i < urls.length; i += batchSize) {
    const batch = urls.slice(i, i + batchSize);
    const batchResults = await Promise.all(batch.map(url => fetch(url)));
    results.push(...batchResults);
  }
  return results;
}

// 调用示例：每批处理5个请求
fetchWithConcurrency(['url1', 'url2', ..., 'url100'], 5);

3. 请求去重与缓存

避免重复请求相同数据，减少冗余请求。

  • 实现方式：
    • 使用 Map 或 Set 缓存已完成的请求。
    • 在 axios 拦截器中检查是否已有相同请求正在执行。
    • 代码示例（请求去重）： 
      const pendingRequests = new Map();

axios.interceptors.request.use(config => {
  const key = `${config.url}-${JSON.stringify(config.params)}`;
  if (pendingRequests.has(key)) {
    return pendingRequests.get(key); // 返回已存在的请求
  }
  const request = axios(config).finally(() => {
    pendingRequests.delete(key);
  });
  pendingRequests.set(key, request);
  return request;
});

4. 合并请求

将多个小请求合并为一个请求，减少接口调用次数。

  • 适用场景：
    • 批量获取数据（如 GET /api/users?ids=1,2,3）。
    • 使用 GraphQL 按需查询多个接口。
  • 优点：
    • 减少 HTTP 请求次数，降低网络开销。
    • 简化后端接口逻辑。

5. 延迟加载与按需加载

仅在用户需要时加载资源，避免一次性加载所有数据。

  • 实现方式：
    • 图片懒加载：使用 loading="lazy" 或 Intersection Observer。
    • 路由懒加载：通过 import() 动态加载组件（如 Vue/React 的懒加载）。
    • 数据按需加载：用户滚动到特定区域时再触发请求。

三、防并发的实际应用场景

  1. 电商秒杀/抢购
    • 用户短时间内点击大量请求，需限制并发数，避免服务器过载。
  2. 数据批量导入/导出
    • 大量文件上传或下载时，分批次处理。
  3. 实时聊天/消息推送
    • 使用 WebSocket 时，控制消息发送频率，避免阻塞。
  4. 地图数据加载
    • 按需加载地图瓦片，减少不必要的请求。

四、总结

策略优点适用场景
并发控制队列精确控制并发数，避免服务器过载批量数据处理、接口聚合
分批处理简单易实现，适合小规模请求表格数据分页加载
请求去重减少冗余请求，节省带宽多用户同时操作相同数据
请求合并显著减少请求次数批量查询、GraphQL 场景
延迟加载/按需加载优化首屏加载速度图片、非关键资源加载

五、注意事项

  1. 合理设置并发数：根据服务器性能和网络环境调整最大并发数（通常为 5-10）。
  2. 结合后端优化：防并发不仅是前端任务，后端需配合限流、负载均衡等策略。
  3. 用户体验优先：确保关键操作（如登录、支付）不受并发控制影响，优先处理。

通过以上方法，前端可以有效防并发，提升应用性能和稳定性！

avatar
文章
阅读
粉丝