javascript - 使用 ajax 上传文件导致严重内存泄漏(Firefox bug)

Question

我编写了一个 JavaScript uploader ，它可以获取图像并将其上传到服务器。我已经将代码精简到最低限度，但我在 Firefox 中仍然遇到泄漏，而且我不明白为什么。

该脚本从 HTML 表单中获取名为 files 的文件对象列表，然后逐步运行该列表并将每个文件上传到服务器。

JavaScript代码如下:

function UploadFile(file) {

        var form_data = new FormData();                  
        form_data.append('file', file);

        $.ajax({
            url: 'Upload.php', 
            dataType: 'text',  
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                        
            type: 'post',
            success: function(){

                console.log("SUCCESS!");

                upload_counter = upload_counter + 1;

                UploadFile(files[upload_counter]);  //Self calling function

                form_data = null;   //Clearing form data memory
                file = null;

            },
            error: function(error)
            {
                console.log("ERROR!");
            }

 });
}

通过从 AJAX 调用的成功函数中调用自身来再次启动该函数，这使一切保持线性和简单，注意它如何沿着 files 数组中的下一个索引递增以进行访问下一个文件对象。

PHP 代码当然不相关，但足以说明它可以很好地处理上传。

使用Windows内存监控Firefox使用的内存如下:

• 1 张图片 -> 320Mb
• 10 张图片 -> 500Mb
• 20 张图片 -> 720Mb
• 30 张图片 -> 960Mb
• 40 张图片 -> 1.1Gb
• 140 张图片 -> 1.6Gb
• 150 张图片 -> 1.7Gb

显然这是一个问题，最终 Firefox 会崩溃。这些文件非常大(每个大约 10Mb)，因此已经上传了 150 个大约 1.5GB 的图像。

为什么会泄漏内存？

我应该添加:

• 在 Chrome、Edge 或 Opera 中不会发生这种情况，它们的内存在上传过程中不会改变。
• 我已在 Firefox 安全模式下对此进行了测试，并禁用了所有附加组件/扩展程序。

由于它只发生在 Firefox 中，我在这里提交了一个错误:

https://bugzilla.mozilla.org/show_bug.cgi?id=1302657

Answer 1

这只是一个理论，但这可能是 Firefox 无法正确处理 ajax 调用的递归性的问题。由于它不断地一次又一次地上传文件，因此在完成之前它可能不会释放内存，如果您最终耗尽了之前的所有内存，那么它就会崩溃。我认为尝试这样的事情可能值得:

for(var i=0;i<file.length;i++){
    UploadFile(files[i]);
}

在你的 UploadFile 函数中，去掉这两行:

upload_counter = upload_counter + 1;
UploadFile(files[upload_counter]);  //Self calling function

由于“for 循环”已经负责遍历文件，因此您将删除成功回调函数中的递归性。

您可能会担心，因为这样做会使文件上传完全异步，并且最终可能会消耗更多内存，但由于大多数 Web 浏览器将并行 HTTP 请求的数量限制为最多 6 个连接，然后根据您的情况基准测试中，您永远不会使用超过 500MB 的 RAM(假设此方法适合您)。