当你需要同时下载 1000 个文件时，直接发起所有请求可能会导致以下问题：
- 服务器过载：服务器可能无法处理如此多的并发请求，导致性能下降，甚至崩溃。
- 网络拥塞：大量的并发请求会消耗大量的带宽，导致网络阻塞。
- 浏览器资源限制：浏览器可能会限制每个域名的并发请求数量（通常是 6 个请求），如果同时发起太多请求，剩余的请求可能被挂起，导致等待时间变长。
优化方案：
为了避免这些问题，我们可以采取以下几种优化策略：
1. 限制并发数（限流）
控制同时下载的文件数量，将并发请求数控制在一个合适的范围内。例如，可以限制每次最多只发起 10 个请求，待其中一些请求完成后再发起新的请求。
示例：使用 Promise.all 限制并发数
async function downloadFilesInBatches(files, maxConcurrency) {
let index = 0;
// 递归下载文件，每次并发下载 maxConcurrency 个文件
async function downloadBatch() {
const batch = files.slice(index, index + maxConcurrency);
await Promise.all(batch.map(file => downloadFile(file)));
index += batch.length;
if (index < files.length) {
// 当一个批次下载完成后，继续下载下一个批次
await downloadBatch();
}
}
// 启动第一次批次下载
await downloadBatch();
}
// 模拟下载文件
function downloadFile(file) {
return new Promise(resolve => {
console.log(`Downloading ${file}`);
setTimeout(() => {
console.log(`Downloaded ${file}`);
resolve();
}, Math.random() * 2000); // 模拟下载时间
});
}
// 使用示例
const files = Array.from({ length: 1000 }, (_, i) => `file${i + 1}`);
downloadFilesInBatches(files, 10); // 最多每次并发下载 10 个文件
2. 使用队列机制（控制请求池）
利用队列将请求分批执行，避免一次性发起过多的请求。可以通过队列来处理每个请求，并且在每个请求完成后再启动下一个。
示例：使用队列控制并发
class RequestQueue {
constructor(maxConcurrency) {
this.maxConcurrency = maxConcurrency;
this.queue = [];
this.activeCount = 0;
}
// 执行一个请求
enqueue(request) {
this.queue.push(request);
this.process();
}
// 处理队列中的请求
async process() {
if (this.activeCount >= this.maxConcurrency || this.queue.length === 0) {
return;
}
const request = this.queue.shift();
this.activeCount++;
try {
await request();
} finally {
this.activeCount--;
this.process(); // 处理下一个请求
}
}
}
// 模拟下载文件
function downloadFile(file) {
return new Promise(resolve => {
console.log(`Downloading ${file}`);
setTimeout(() => {
console.log(`Downloaded ${file}`);
resolve();
}, Math.random() * 2000); // 模拟下载时间
});
}
// 使用示例
const files = Array.from({ length: 1000 }, (_, i) => `file${i + 1}`);
const queue = new RequestQueue(10); // 最大并发 10
files.forEach(file => {
queue.enqueue(() => downloadFile(file));
});
3. 利用 setTimeout 或 setInterval 增加请求间隔
如果你不想完全限制并发数量，但又想避免服务器过载，可以在请求之间加上间隔，逐步发送请求，避免在短时间内发起过多的请求。
示例：请求间隔
async function downloadFilesWithDelay(files, delay) {
for (let i = 0; i < files.length; i++) {
await downloadFile(files[i]);
console.log(`Downloaded ${files[i]}`);
// 在每次下载之间添加延迟
if (i < files.length - 1) {
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}
// 使用示例
const files = Array.from({ length: 1000 }, (_, i) => `file${i + 1}`);
downloadFilesWithDelay(files, 100); // 每下载一个文件，延迟 100ms
4. 使用 Web Workers（在后台下载文件）
如果你的任务比较重，可以考虑利用 Web Workers 来将下载任务放到后台线程中进行，避免阻塞主线程。这样做能提高浏览器的响应速度，尤其是在处理大量请求时。
示例：使用 Web Workers 下载文件
// worker.js
self.onmessage = async function (event) {
const { file } = event.data;
console.log(`Worker downloading ${file}`);
setTimeout(() => {
self.postMessage(`Downloaded ${file}`);
}, Math.random() * 2000);
};
// 主线程
function downloadFilesWithWorker(files) {
const workers = [];
const results = [];
files.forEach(file => {
const worker = new Worker('worker.js');
worker.postMessage({ file });
worker.onmessage = function (event) {
results.push(event.data);
worker.terminate(); // 完成后终止 worker
};
workers.push(worker);
});
}
// 使用示例
const files = Array.from({ length: 1000 }, (_, i) => `file${i + 1}`);
downloadFilesWithWorker(files);
5. 分批下载并按优先级处理
有时候可能需要根据文件的优先级来控制并发。例如，某些文件是必须尽早下载的，可以优先下载这些文件，然后再下载其它文件。
6. 服务器端支持优化
除了前端优化，你还可以在服务器端进行优化，确保能够处理大量并发请求。具体包括：
- 通过负载均衡器分配请求到多个服务器。
- 使用 HTTP/2 或 HTTP/3，它们支持更高效的并发请求和流控。
- 设置合适的速率限制，避免恶意请求过载服务器。
总结：
- 限制并发数：最常见的优化方式，通过限制每次并发请求的数量来控制负载。
- 使用队列机制：维护一个请求池，逐步处理文件下载请求。
- 添加请求间隔：避免瞬间发送过多请求，控制请求发送的速率。
- 使用 Web Workers：将下载任务分配给后台线程，避免主线程阻塞。
- 服务器端优化：确保服务器能够处理大量并发请求，优化带宽和资源管理。
以上方法可以有效地帮助你优化前端下载文件的并发控制，避免因过多并发请求导致的服务器崩溃或性能问题。
