如何解决此Javascript内存泄漏

Question

Here's the code:

function refreshContent(id) {
    function imageLoaded(){
        //get device div
        var device_div = document.getElementById("device-" + id);

            //remove old image, if there is one
        if(device_div.hasChildNodes()) 
            delete device_div.removeChild(device_div.lastChild);

        device_div.appendChild(image);
        var device_id = device_div.id.split("-")[1]; //divs are named "device-<something>"
        window.setTimeout(refreshContent, 5000, device_id);
    }
    var image = new Image();
    image.src = SERVER_BASE_URL + "/api/test/" + id + "/image/" + new Date().getTime();


    image.addEventListener("load", imageLoaded);
}

Memory usage according to Chrome task manager quickly grows when this is running and doesn't when I disable it, so I know it's this portion of the code that's leaking.

Some ideas I have:

• I'm not properly getting rid of all references to the old image, so orphaned Image objects are piling up.
• The recursive call to setTimeout is keeping old function calls in memory.

Nothing I've tried seems to make a difference.

Answer 1

You should remove the event listener as soon as it is invoked.

function refreshContent(id) {
    function imageLoaded(){

        image.removeEventListener("load", imageLoaded);

        //get device div
        var device_div = document.getElementById("device-" + id);

            //remove old image, if there is one
        if(device_div.hasChildNodes()) 
            delete device_div.removeChild(device_div.lastChild);

        device_div.appendChild(image);
        var device_id = device_div.id.split("-")[1]; //divs are named "device-<something>"
        window.setTimeout(refreshContent, 5000, device_id);
    }
    var image = new Image();
    image.src = SERVER_BASE_URL + "/api/test/" + id + "/image/" + new Date().getTime();


    image.addEventListener("load", imageLoaded);
}

Forgetting to unregister an event listener is a very common cause of memory leak.

Answer 2

I'll just recap what I see here. Each 5 seconds:

1. A new id parameter is provided
2. A new function instance (named imageLoaded ) is created, bound to the value of id
3. A new Image is created
4. Image is bound to the imageLoaded function instance

I may be wrong, but it seems to me that they will hold one to each other tightly, and that they might not be garbage collected.

So, just adding a line

image = null;

after

image.addEventListener("load", imageLoaded);

might solve the situation. So, you should end up with:

function refreshContent(id) {
  function imageLoaded() {
    //get device div
    var device_div = document.getElementById("device-" + id);

    //remove old image, if there is one
    if (device_div.hasChildNodes())
      delete device_div.removeChild(device_div.lastChild);

    device_div.appendChild(image);
    var device_id = device_div.id.split("-")[1]; //divs are named "device-<something>"
    window.setTimeout(refreshContent, 5000, device_id);
  }
  var image = new Image();
  image.src = SERVER_BASE_URL + "/api/test/" + id + "/image/" + new Date().getTime();


  image.addEventListener("load", imageLoaded);
  image = null;
}

Actually, this is a duplicate of Dispose an image object , but it might be that Pascal Le Merrer has a point in his answer.