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

Question

在我的网页上，有一个功能可以让用户下载 zip 文件。它的工作方式是，用户单击下载按钮后，将向 api 发送 GET 请求，然后服务器将文件数据作为 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 作为临时文件并向客户端发送指向该文件的链接，那么这看起来会工作得更好。