Filereader Memory Leak

I'm using FileReader to upload image files to a client for data fetching and thumbnails display. what I've noticed is, that on the page process, in task manager, the memory just k

Solution 1:

ok, I have fixed this.

the reason was that I set reader to - new FileReader() - each time.

so I only made it global.

here is the working code:

<scripttype="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 = newFileReader(); // <- made this only once

            fu.load();
        },

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

            if (file) {
                fu.reader.onloadend = (function (theFile) {
                    returnfunction (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>

Solution 2:

I just tested it with 289 files and there's no memory leak. Here's the jsfiddle I use:

http://jsfiddle.net/2pyqjeke/

Before reading:

totalusedfreesharedbuff/cacheavailableMem:3945        1400         749231796        2253

After reading:

totalusedfreesharedbuff/cacheavailableMem:3945        1963         292231690        1690

Sometime after:

totalusedfreesharedbuff/cacheavailableMem:3945        1398         856231690        2255

I'm using Firefox and Manjaro.

Edit

With Chromium these are my results.

Before:

totalusedfreesharedbuff/cacheavailableMem:3945        1140         633522171        2476

After loading pictures:

totalusedfreesharedbuff/cacheavailableMem:3945        1573         296432075        2050

And after that it wouldn't go down... so I'm guessing the GC is not releasing the file readers. So I did a very small change to the code:

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

And here are the results again in Chromium...

Before:

totalusedfreesharedbuff/cacheavailableMem:3945        1197         672442075        2426

After loading pictures:

totalusedfreesharedbuff/cacheavailableMem:3945        1588         322442034        2035

And after a while it went down to:

totalusedfreesharedbuff/cacheavailableMem:3945        1227         684442034        2397

Quite frankly I don't why Chromium is not releasing the FileReader and Firefox is.