FileReader内存泄漏

Question

我使用FileReader将图像文件上传到客户端，以便获取数据和显示缩略图。

我注意到的是，在页面过程中，在任务管理器中，内存总是越来越高。当这个过程停止时，记忆就会很高，永远不会下降。

你能告诉我我在这里做错了什么吗？

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

谢谢你的进阶。

-- 下面是指向web上的代码示例的链接

这是我的密码：

<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>

Answer 1

好的，我已经修好了。

原因是我每次都将读取器设置为-()。

所以我只把它变成全球性的。

以下是工作代码：

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

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

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

        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.reader = new FileReader(); // <- made this only once

            fu.load();
        },

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

            if (file) {
                fu.reader.onloadend = (function (theFile) {
                    return function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            fu.reader.abort();

                            setTimeout(fu.load, 5);
                        }
                    };
                })(file);


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

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

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

        }
    }
</script>

Answer 2

我刚刚用289个文件测试了它，没有内存泄漏。这是我用的小提琴：

http://jsfiddle.net/2pyqjeke/

阅读前：

              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        1573         296          43        2075        2050

从那以后它就不会倒下..。所以我猜GC没有释放文件阅读器。所以我对代码做了一个很小的改动：

http://jsfiddle.net/2pyqjeke/1/

这是铬的结果..。

在此之前：

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

加载图片后：

              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和火狐。