Javascript 文件读取器内存泄漏

我正在使用FileReader将图像文件上载到客户端 用于数据获取和缩略图显示

我注意到的是， 在页面进程中，在任务管理器中， 记忆越来越高。 当进程停止时，内存保持在高位，永远不会下降

你能告诉我我做错了什么吗

要检查，请上传200多张图片，最多30毫克。 并确保内存不断泄漏

提前谢谢你

--

这是我的代码：

<input class="fu" type="file" multiple="multiple" />
<div class="fin"></div>
<div class="list"></div>

<script type="text/javascript">
    $(document).ready(function () {
        var input = $("body input.fu");

        input[0].addEventListener('change', fu.select, false);
    });

    var fu = {
        list: [],
        index: 0,

        select: function (evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.target.files ? evt.target.files : evt.dataTransfer ? evt.dataTransfer.files : []; // FileList object

            fu.list = files;
            fu.index = 0;

            fu.load();
        },

        load: function () {
            var index = fu.index;
            var file = fu.list[index];

            if (file) {
                var reader = new FileReader(); // File API object

                reader.onloadend = (function (theFile) {
                    return function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            setTimeout(fu.load, 20);
                        }
                    };
                })(file);


                reader.onprogress = null;
                reader.onloadstart = null;
                reader.onerror = null;
                reader.onabort = null;

                if (reader.readAsBinaryString) {
                    reader.readAsBinaryString(file);
                } else {
                    reader.readAsDataURL(file);
                }

                fu.index++;
                $('.fin').html("#" + fu.index);
            } else {
                $('.fin').html("finish");
            }

        }
    }
</script>

$（文档）.ready（函数（）{
变量输入=$（“body input.fu”）；
输入[0]。addEventListener（'change'，fu.select，false）；
});
var fu={
名单：[]，
索引：0，
选择：功能（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
var files=evt.target.files？evt.target.files:evt.dataTransfer？evt.dataTransfer.files:[]；//文件列表对象
fu.list=文件；
fu.index=0；
fu.load（）；
},
加载：函数（）{
var指数=fu指数；
var file=fu.list[index]；
如果（文件）{
var reader=new FileReader（）；//文件API对象
reader.onloadend=（函数（文件）{
返回函数（evt）{
if（evt.target.readyState==FileReader.DONE）{
设置超时（fu.load，20）；
}
};
})（文件）；
reader.onprogress=null；
reader.onloadstart=null；
reader.onerror=null；
reader.onabort=null；
if（reader.readAsBinaryString）{
reader.readAsBinaryString（文件）；
}否则{
reader.readAsDataURL（文件）；
}
fu.index++；
$（'.fin'）.html（“#”+fu.index）；
}否则{
$（'.fin'）.html（“完成”）；
}
}
}

我刚刚用289个文件测试了它，没有内存泄漏。下面是我使用的JSFIDLE：

阅读前：

              total        used        free      shared  buff/cache   available
Mem:           3945        1400         749          23        1796        2253

阅读后：

              total        used        free      shared  buff/cache   available
Mem:           3945        1963         292          23        1690        1690

之后某个时候：

              total        used        free      shared  buff/cache   available
Mem:           3945        1398         856          23        1690        2255

我正在使用Firefox和Manjaro

编辑

这些是我的结果

之前：

              total        used        free      shared  buff/cache   available
Mem:           3945        1140         633          52        2171        2476

              total        used        free      shared  buff/cache   available
Mem:           3945        1197         672          44        2075        2426

加载图片后：

              total        used        free      shared  buff/cache   available
Mem:           3945        1573         296          43        2075        2050

              total        used        free      shared  buff/cache   available
Mem:           3945        1588         322          44        2034        2035

在那之后它就不会下降了。。。所以我猜GC不会释放文件读取器。所以我对代码做了一个很小的修改：

这是铬的结果

之前：

              total        used        free      shared  buff/cache   available
Mem:           3945        1140         633          52        2171        2476

              total        used        free      shared  buff/cache   available
Mem:           3945        1197         672          44        2075        2426

加载图片后：

              total        used        free      shared  buff/cache   available
Mem:           3945        1573         296          43        2075        2050

              total        used        free      shared  buff/cache   available
Mem:           3945        1588         322          44        2034        2035

过了一段时间，情况发展到：

              total        used        free      shared  buff/cache   available
Mem:           3945        1227         684          44        2034        2397

坦白说，我不知道为什么Chromium没有发布FileReader，而Firefox发布了。

好的，我已经解决了这个问题

原因是我每次都将reader设置为-new FileReader（）

所以我只是让它全球化

以下是工作代码：

$（文档）.ready（函数（）{
变量输入=$（“body input.fu”）；
输入[0]。addEventListener（'change'，fu.select，false）；
});
var fu={
名单：[]，
索引：0，
读者：空，
选择：功能（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
var files=evt.target.files？evt.target.files:evt.dataTransfer？evt.dataTransfer.files:[]；//文件列表对象
fu.list=文件；
fu.index=0；
fu.reader=new FileReader（）；/“若要检查，请上载200多张图片”创建200个
FileReader实例
？“最多30MG”。什么是“MG”？它正在创建200个实例吗？MG是兆字节，其目的是将许多图像上载到客户端并查看对内存的影响。如果您上载10张图片，您将不会看到不同的打开任务管理器、选择当前选项卡、查看内存，我强烈感觉这是您的
阅读器。onloadend
功能…真的，我不理解你想在那里做什么？onloadend-我得到了获取数据和显示缩略图所需的文件流。在这里，我展示了即使我只加载一个文件，然后再加载下一个文件，它仍然会弄乱内存@MinusFourPlease试着使用chrome。你在上传大文件吗？@RoeyZada，我已经用chrome更新了答案chrome并添加了一个可能的修复程序。谢谢！。不幸的是，这仍然没有释放chrome上的内存。在Firefox上，它就像一个符咒一样工作。我注意到它没有立即释放资源…我不知道为什么。它需要大约一分钟，但它确实在chrome上释放了大部分内存，并且在Firefox上工作得非常完美。我终于找到了修复程序。不是吗看看我的答案，原因是reader只有一个-新的FileReader（）-现在firefox和chrome都没有了！非常感谢你的帮助：）@MinusFour