javascript - 文件读取器 : reading many files with javascript without memory leaks

Question

在网页中，我必须读取文件的一小部分，这适用于许多 (1500 - 12000) 个小文件，每个文件大约 1 Mb 大。收集到我需要的信息后，我将其推送回服务器。

我的问题:我使用 FileReader API，垃圾收集不起作用并且内存消耗激增。

代码如下:

function extract_information_from_files(input_files) {

//some dummy implementation
for (var i = 0; i < input_files.length; ++i) {


    (function dummy_function(file) {

        var reader = new FileReader();

        reader.onload = function () {

            //convert to Uint8Array because used library expects this

            var array_buffer = new Uint8Array(reader.result);

            //do some fancy stuff with the library (very small subset of data is kept)

            //finish

            //function call ends, expect garbage collect to start cleaning.
            //even explicit dereferencing does not work
        };

        reader.readAsArrayBuffer(file);

    })(input_files[i]);

}

一些说明:

• 不，乍一看，图书馆似乎没有保留对加载对象的任何引用。即使您运行上面显示的代码，完全不使用 array_buffer，所有内容都会保存在内存中。
• 行为因浏览器而异:
• Chrome (43) 没有清除任何东西
• Firefox (38) 似乎使用了大约所有文件大小 1/3 的剩余内存
• 我发现在 Internet 上讨论相同问题的话题非常非常少。我试过的是:
• Is it possible to clean memory after FileReader? -> 旧的，File.prototype.mozSlice 已更改为 .slice，但即便如此问题仍然存在
• http://www.joelandritsch.com/posts/lessons-learned-in-javascript-11 -> 建议的解决方案不起作用。
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management我不是很清楚。 -> 似乎首先您不需要取消引用(请参阅不需要对象与对象不可访问)，但随后他们还声明“限制:需要使对象明确不可访问”

当结合使用 FileReader 和 https://gildas-lormeau.github.io/zip.js/ 时，最后一个奇怪的细节(为完整性而发布) ，我在将文件推送到 zip 存档之前读取了一个文件，垃圾收集工作正常。

所有这些评论似乎都指向我无法正常使用 FileReader，所以请告诉我如何使用。

Answer 1

问题可能与执行顺序有关。在您的 for 循环中，您正在使用 reader.readAsArrayBuffer(file) 读取所有文件。此代码将在为读者运行任何 onload 之前运行。根据 FileReader 的浏览器实现，这可能意味着浏览器在调用任何 onload 之前加载整个文件(或简单地为整个文件预分配缓冲区)。

尝试像队列一样处理文件，看看它是否有所作为。像这样的东西:

function extract_information_from_files(input_files) {
    var reader = new FileReader();

    function process_one() {
        var single_file = input_files.pop();
        if (single_file === undefined) {
            return;
        }

        (function dummy_function(file) {
            //var reader = new FileReader();

            reader.onload = function () {
                // do your stuff
                // process next at the end
                process_one();
            };

            reader.readAsArrayBuffer(file);
        })(single_file);
    }

    process_one();
}

extract_information_from_files(file_array_1);
// uncomment next line to process another file array in parallel
// extract_information_from_files(file_array_2);

编辑:浏览器似乎希望您重用FileReaders。我编辑了代码以重复使用单个阅读器并测试(在 chrome 中)内存使用限制为您阅读的最大文件。