当前位置：首页 > news >正文

前端 JavaScript 中快速发起多个下载请求时，解决浏览器的并发下载连接限制

news 来源：原创 2025/4/27 10:24:51

为什么会漏掉链接？

当你在前端 JavaScript 中快速发起多个下载请求时，浏览器可能无法同时处理所有请求，导致一些请求被忽略。这通常与浏览器的并发连接限制有关，例如 Chrome 可能限制每秒下载 10 个文件。

如何避免漏掉链接？

引入延迟： 你可以在每次下载请求之间添加约 333 毫秒的延迟，确保请求逐个处理。
使用 JSZip： 另一种方法是使用 JSZip 库将所有文件打包成一个压缩文件，然后下载这个压缩文件，这样只需发起一个下载请求，减少漏掉的风险。

代码示例

延迟方法：

const urls = [...]; // 文件 URL 数组
const delay = 333; // 约 1/3 秒延迟

for (let i = 0; i < urls.length; i++) {
    const a = document.createElement('a');
    a.href = urls[i];
    a.download = true; // 或指定文件名
    a.style.display = 'none';
    document.body.appendChild(a);

    setTimeout(() => {
        a.click();
        document.body.removeChild(a);
    }, i * delay);
}

JSZip 方法：
首先引入 JSZip 库：

<script src="https://cdn.skypack.dev/jszip@3.10.1"></script>

然后使用以下代码：

const urls = [...]; // 文件 URL 数组
const zip = new JSZip();

async function batchDownload() {
    for (let url of urls) {
        const response = await fetch(url);
        const blob = await response.blob();
        const filename = url.split('/').pop();
        zip.file(filename, blob);
    }
    const content = await zip.generateAsync({ type: 'blob' });
    saveAs(content, 'downloads.zip');
}

batchDownload();

意外的细节

Firefox 在处理批量下载时可能表现不同，延迟方法可能无效（具体没有尝试），建议使用 JSZip 来确保所有文件都被包含。

详细讲解

问题背景

用户报告在批量下载时，总是会漏掉后面的几个下载链接。这表明在快速发起多个下载请求时，浏览器可能无法处理所有请求，导致一些链接被忽略。可能的原因为浏览器对并发 HTTP 连接的限制，例如 Chrome 可能限制每秒下载 10 个文件（Chrome/Chromium limits the number of download to a maximum of 10 per second）。此外，不同浏览器（如 Firefox）可能有不同的行为，增加了复杂性。

解决方案分析

为了解决这个问题，我们考虑了两种主要方法：引入延迟和使用 JSZip 创建压缩文件。

方法 1：引入延迟

通过在每次下载请求之间添加延迟，可以逐个处理请求，避免浏览器因并发限制而忽略某些请求。研究表明，约 333 毫秒的延迟（约 1/3 秒）在 Chrome 和 Opera 中有效（Stack Overflow: How in JS to download more than 10 files in browser including Firefox）。

实现方式： 使用 setTimeout 在循环中为每个下载请求添加延迟。例如：

const urls = [...]; // 文件 URL 数组
const delay = 333; // 约 1/3 秒延迟

for (let i = 0; i < urls.length; i++) {
    const a = document.createElement('a');
    a.href = urls[i];
    a.download = true; // 或指定文件名
    a.style.display = 'none';
    document.body.appendChild(a);

    setTimeout(() => {
        a.click();
        document.body.removeChild(a);
    }, i * delay);
}

优点： 简单直接，适用于大多数浏览器，特别是在 Chrome 和 Opera 中。
局限性： 在 Firefox 中可能无效，具体表现因浏览器版本和配置而异。

方法 2：使用 JSZip 创建压缩文件

另一种方法是使用 JSZip 库将所有文件打包成一个压缩文件，然后下载这个压缩文件。这样只需发起一个下载请求，彻底避免了并发请求的问题。JSZip 是一个 JavaScript 库，允许在浏览器中创建、读取和编辑 .zip 文件（JSZip Documentation）。

实现方式：
首先引入 JSZip 库：

<script src="https://cdn.skypack.dev/jszip@3.10.1"></script>

然后使用以下代码：

const urls = [...]; // 文件 URL 数组
const zip = new JSZip();

async function batchDownload() {
    for (let url of urls) {
        const response = await fetch(url);
        const blob = await response.blob();
        const filename = url.split('/').pop();
        zip.file(filename, blob);
    }
    const content = await zip.generateAsync({ type: 'blob' });
    saveAs(content, 'downloads.zip');
}

batchDownload();

优点： 提供跨浏览器一致性，特别是在 Firefox 中表现更好（Stack Overflow: How in JS to download more than 10 files in browser including Firefox）。用户只需下载一个文件，体验更佳。
局限性： 需要先通过 AJAX 加载所有文件，可能对大文件造成内存压力，且需要确保文件可通过 AJAX 访问（同域或配置 CORS）。

浏览器差异与注意事项

Chrome 和 Opera： 通常限制每秒 10 个下载，延迟方法有效（Chrome/Chromium limits the number of download to a maximum of 10 per second）。
Firefox： 延迟方法可能无效，建议使用 JSZip。Firefox 对 File System API 的支持有限，可能影响大文件下载（MEGA Help Centre: What are the file size limitations when downloading using my browser?）。
并发连接限制： 浏览器对每个域的并发连接数有限制，通常为 4-6 个（Stack Overflow: max number of concurrent file downloads in a browser?），这可能导致快速发起的请求被队列化或忽略。

性能与用户体验考虑

延迟方法： 适合文件数量不多且用户愿意等待的情况。延迟过长可能影响用户体验，建议从 333 毫秒开始测试。
JSZip 方法： 适合文件数量多或跨浏览器兼容性要求高的场景。但对于大文件，内存使用可能成为瓶颈，需注意浏览器内存限制（Stack Overflow: Is there any limit to filesize while downloading through browser over http）。

对比表

方法	适用场景	优点	局限性
引入延迟	Chrome、Opera，文件数量少	简单直接，易于实现	Firefox 可能无效，延迟可能影响体验
使用 JSZip	跨浏览器，文件数量多	单一下载请求，体验更好	需要 AJAX 访问，内存占用可能高

结论与建议

引入延迟是解决批量下载漏掉链接的直接方法，建议从 333 毫秒开始测试，适用于 Chrome 和 Opera。对于 Firefox 或需要更高可靠性的场景，推荐使用 JSZip 创建压缩文件，确保所有文件被包含。用户应根据文件大小、数量和浏览器环境选择合适的方法。

关键引用

Chrome/Chromium limits the number of download to a maximum of 10 per second
[Stack Overflow: How can I let a user download multiple files when a button is clicked?](https://stackoverflow.com/questions/18451856/how-can-i-let-a-user-download-multiple-files when-a-button-is-clicked)
Stack Overflow: How in JS to download more than 10 files in browser including Firefox
JSZip Documentation
MEGA Help Centre: What are the file size limitations when downloading using my browser?
Stack Overflow: max number of concurrent file downloads in a browser?
Stack Overflow: Is there any limit to filesize while downloading through browser over http