为什么通过 AJAX 下载 zip 文件需要这么长时间?

Question

在我的网页上，有一个功能可以让用户下载zip文件。它的工作方式就像用户单击下载按钮后，GET请求将发送到api，然后服务器将文件数据作为arraybuffer发送回。然后，UI 将数据转换为 Blob 对象，并将其另存为 zip 文件。下面是示例代码：

function download(){
var req = {
method: 'GET',
url: "api/download",
contentType: "application/zip",
responseType: "arraybuffer",
headers: {"Accept": "application/zip"}
};
$http(req).then(function (res) {
if(res.status === 200){
var file = new Blob([res.data], { type: "application/zip" });
var link = document.createElement('a');
link.href = URL.createObjectURL(file);
link.download = "MyFile.zip";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}, function (err) {});
}

除了一个问题外，代码运行良好：整个过程似乎需要很长时间才能完成。即使对于只有 100kb 的 zip 文件，下载仍然需要至少 2 分钟。当我检查开发工具时，我注意到数据传输过程在几乎 3-5 秒内完成，然后程序就像在那里又停止了 2 分钟，然后继续下一步。(同时，开发工具不断显示请求仍在进行中)。更奇特的是，我有一些不同大小的测试文件，比如从 100KB 到 150MB，下载时间大致相同(不到 5 秒不同)。

有人可以详细说明可能是什么原因，我该如何改进吗？或者是否有更好的方法通过不同的工作流程/模型实现目标？

提前谢谢你！

Answer 1

问题似乎是您通过 Blob 将 ZIP 文件临时存储在客户端浏览器内存中，该文件在其中存储两次(一次作为结果数据，一次作为 Blob)。如果您只是让服务器将 zip 生成为临时文件并向客户端发送指向该文件的链接，这看起来会更好。