Why does this code cause a memory leak in JavaScript?

Question

    <!doctype html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    function Frame(){
        this.divs=[];
        this.extra = new Array(2000);
    }

    Frame.prototype.reloadMapMarker = function(){
        //appendMapMarker2();
        appendMapMarker1();
    };

    function divClick(){

    }

    //a big surprise!!!
    function appendMapMarker1(){
        var div = document.getElementById('test');
        $(div).empty();
        var frag=document.createDocumentFragment();
        for(var i=0; i<100; i++){
            var newDiv=document.createElement('div');
            newDiv.onclick = divClick;
            newDiv.innerHTML = String(i);
            frag.appendChild(newDiv);
            frame.divs.push(newDiv);
        }
        div.appendChild(frag);
    }

    //less memory leak
    function appendMapMarker2(){
        var div = document.getElementById('test');
        var str = [];
        for(var i=0; i<100; i++){
            str.push('<div onclick="divClick()" style="margin:2px;border:1px solid #eee;">',i,'</div>');
            frame.divs.push(div.children[div.children.length-1]);
        }
        div.innerHTML = str.join('');
    }

    var frame =new Frame();
    window.onload=function(){
        setInterval(frame.reloadMapMarker,100);
    };
    </script>
</head>
<body>
    <div id="test"></div>
</body>

Both appendMapMarker1 and appendMapMarker2 will cause a memory leak, but appendMapMarker2 is much better than appendMapMarker1.

Can you tell me why this code causes a memory leak and why appendMapMarker2 is better than appendMapMarker1?

styrr · Accepted Answer · 2011-10-13 13:28:44Z

1

Your memory leak is quite obvious. You put an "infinite" number of elements in your frame.divs array. So reset the frame.divs array each time you call the appendMapMaker* function. Basically like this:

function appendMapMarker*() {
    frame.divs = [];
    // ....
}

answered Oct 13, 2011 at 13:28

styrr

8294 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

simon xu Over a year ago

i dont think so,if you are right,appendMapMarker2 is the same as appendMapmarker1 on memory cost.but appendMapMarker1 will consume memory at the speed of 8M/s.

simon xu Over a year ago

and appendMapMarker2 is 20K/s

styrr Over a year ago

I am right. I just run the modified appendMapMarker1 method for minute: no memory leak. The reason why appendMapMarker2 isn't leaking is that you have an exception in it, which causes that no elements are added to the frame.divs array.

simon xu Over a year ago

so if we reset frame.divs, there is no memory leak in this code?

Collectives™ on Stack Overflow

Why does this code cause a memory leak in JavaScript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related