面试官：假如有几十个请求，如何去控制并发？

大家好，我是宝哥，一个前端程序员。

不久前，群里的一个小伙伴过来跟我讲，他参加了一家互联网公司的面试，应聘前端开发工程师的职位。面试过程中，面试官注意到他的简历中提到曾做过图片批量下载的功能，于是问他一个问题：“如果一次性下载几十个文件，要如何控制并发请求呢？”

这个问题直击并发控制的本质，考察对异步编程和性能优化的理解。

下面我整理了一下他的回答思路，希望对你有所启发：

1. 使用 JavaScript 原生方法控制并发

这是最基本的控制并发的方式，通过设置一个计数器和最大并发数，来限制同时进行的下载任务数量。例如，可以维护一个正在下载的任务队列，当队列满时，新的下载任务需要等待，直到有任务完成释放出空间。

步骤讲解

1. 创建一个计数器 count，用于记录当前并发请求数量。

2. 设置最大并发数 max，例如 5。

3. 遍历下载列表，每次取 max 个文件开始下载。

4. 每个文件下载完成后，count 减 1，并从列表中取下一个文件开始下载，直到所有文件下载完成。

代码实例

function downloadFiles(files, max) {
  let count = 0;

  function startDownload(file) {
    count++;
    // 执行下载操作，例如使用 Fetch API 或 XMLHttpRequest
    fetch(file.url)
      .then(() => {
        count--;
        if (files.length > 0) {
          startDownload(files.shift());
        }
      })
      .catch((error) => {
        // 处理下载错误
      });
  }

  for (let i = 0; i < max && i < files.length; i++) {
    startDownload(files[i]);
  }
}

2. 使用第三方库 async-pool

async-pool 是一个专门用于管理并发任务的 JavaScript 库，它提供了更简洁和灵活的方式来控制并发数量、处理任务队列和错误处理。使用 async-pool 可以简化代码逻辑，提高开发效率。

步骤讲解

1. 安装 async-pool 库：npm install async-pool

2. 创建一个 Pool 实例，设置最大并发数。

3. 使用 pool.run 方法，将每个下载任务添加到池中执行。

4. async-pool 会自动控制并发数量，并在任务完成后调用回调函数。

代码实例

const asyncPool = require('async-pool');

async function downloadFiles(files, max) {
  const pool = new asyncPool({ concurrency: max });

  await Promise.all(
    files.map((file) =>
      pool.run(() => {
        // 执行下载操作
        return fetch(file.url);
      })
    )
  );
}

3. 使用 Web Workers

Web Workers 允许 JavaScript 代码在后台线程运行，避免阻塞主线程，适用于处理大量计算或 I/O 操作。通过将下载任务分配给多个 Worker 线程，可以实现真正的并行下载，提高下载效率。

步骤讲解

1. 创建一个 Web Worker 脚本，负责处理单个文件的下载任务。

2. 在主线程中，创建多个 Worker 实例，并将下载任务分配给它们。

3. Worker 线程下载完成后，将结果发送回主线程。

代码实例

// worker.js
onmessage = function (event) {
  const file = event.data;
  // 执行下载操作
  fetch(file.url)
    .then((response) => response.blob())
    .then((blob) => {
      postMessage(blob);
    });
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(file);
worker.onmessage = function (event) {
  // 处理下载结果
};

在介绍完这些方法后，他进一步分析了它们的优缺点和适用场景。例如，JavaScript 原生方法实现简单，但功能有限；async-pool 易于使用，但引入了额外的依赖；Web Workers 功能强大，但需要考虑线程间通信和数据同步的问题。

接着，面试官又追问了三个问题：

1. 如何根据网络状况动态调整并发数量？

答：可以利用浏览器提供的 Network Information API 获取用户的网络连接信息，例如连接类型（WiFi、4G 等）和下行速度。根据网络状况，动态调整最大并发数，例如网络状况较差时，降低并发数量，避免网络拥堵。

2. 如何处理下载失败的情况？

答：在下载过程中，可能会遇到网络错误、服务器错误等情况导致下载失败。需要捕获这些错误，并进行相应的处理，例如重试下载、记录错误日志、提示用户等。可以设置最大重试次数，避免无限重试。

3. 如何优化下载速度？

可以使用以下几种方法优化下载速度：

1. 文件分片下载：将大文件分成多个小块进行下载，可以提高下载效率和稳定性。

2. 断点续传：支持断点续传，可以避免下载中断后重新下载整个文件。

3. 使用 CDN 加速：利用 CDN 的缓存机制，可以加速文件的下载速度。

收获与反思

这次面试经历让他更加深刻地认识到并发控制的重要性，以及作为一个前端开发者需要掌握的技能。在实际开发中，我们需要根据具体的需求和场景选择合适的并发控制策略，并进行不断的优化和调整，以保证系统的性能和稳定性。

同时，我也意识到，仅仅掌握技术知识是不够的，还需要具备良好的沟通能力和 problem-solving skills。在面试过程中，清晰地表达自己的思路，分析问题的本质，并提出有效的解决方案，才能赢得面试官的认可。

推荐阅读

HR爆料：年薪 80 万，现在只要月薪1万

某公司leader：面试了个38岁的老哥，否了

左下方点击关注我，有惊喜送哦

公众号回复副业资料，送你405个副业玩法

关注下方宝哥微信，围观我的朋友圈，领简历模板！

添加好友备注【面试群】拉你进面试交流群

如果觉得不错，欢迎点赞、收藏、分享❤❤