为什么通过 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 作为临时文件并向客户端发送指向该文件的链接，这看起来会更好。