浏览器默认单次最多同时下载10张图片（JS），如何修改代码提升并发下载数？

浏览器的同源并发下载上限是浏览器内置的安全规则，无法从JS层面直接绕过，我们可以通过分批并发队列的方案，把同时执行的下载任务数控制在浏览器限制阈值内，避免超出上限导致的下载阻塞、失败问题。

核心调整思路 #

• 设定单批最大并发数，默认设为8即可，留2个冗余避免占满所有连接
• 把所有下载任务拆分为多批执行，每批执行完成后再触发下一批
• 用Promise控制异步任务的执行节奏，避免一次性触发所有saveAs调用

调整后的代码 #

async transferFiles() {
  this.checkMark = true
  // 单批最大并发数，可根据需求调整，不超过浏览器默认上限10即可
  const MAX_CONCURRENT = 8
  const images = this.finalImages
  let index = 0

  // 单批下载任务执行函数
  const downloadBatch = async () => {
    while (index < images.length) {
      const currentIndex = ++index
      const image = images[currentIndex - 1]
      saveAs(image, `imagem${currentIndex}`)
      // 每个下载任务之间加短延迟，避免瞬间触发过多请求
      await new Promise(resolve => setTimeout(resolve, 100))
    }
  }

  // 生成指定数量的并发任务
  const batchTasks = new Array(MAX_CONCURRENT).fill(0).map(() => downloadBatch())
  // 等待所有批次任务执行完成
  await Promise.all(batchTasks)
}

可选优化点 #

• 如果需要更高的下载并发，可以把图片资源部署到不同子域名下，利用浏览器不同域名分别计算并发上限的规则，提升整体并发数
• 如果是超大批量下载，可以在代码中增加下载完成的回调校验，避免出现漏下的情况

内容的提问来源于stack exchange，提问作者Miguel Pacheco Soares