CODEWITHSUNDEEP
javascriptmemory-managementmemory-leaks
Niels
Niels

Reputation: 49909

Javascript Memory Management Leaks

Currently I am creating a web Application. Where users should be able to be running my application all day. Currently I am having some memory issues. Where the browser seems to crash. What I was using is this kind of structure:

function Module() {
    var _me = this;

    this.init = function(){
        _me.setBindings(); // Using reference from Module instead of this
    }

   // All kind of functions

   this.init();
}

Which I changed to this.

So a more complex situation is this (which is actually a part of my code atm):

$.modules.dynamic_static_webpage.prototype.addRedirect = function (anum, aeditor) {
    $.prompt(
            $.utils.getTranslation("Redirect"),
            $.utils.getTranslation("Geef de URL op waar naar toe geredirect moet worden"),
            $.proxy(function (num, editor, input) {
                this.clearRedirect(editor);
                var val = input.val();

                if (val.indexOf("www") == 0) {
                    val = "http://" + val;
                }

                // Timeout needed, because otherwise the clear is not finished
                setTimeout($.proxy(function (n, e, v) {
                    $.HTMLTexteditorField.setIframeSelectionHTML.call(e, "{CMS-REDIRECT" + n + "_" + v + "}");
                    this.redirectShow(n, v);
                }, this, num, editor, val), 200);
            }, this, anum, aeditor)
       );
};

Now I've added the $.proxy a lot. Which seems to be a bit strange.

I have a lot of "using variables from outside the scope, inside the scope". Which I rewrite to the above code. I've looked on different sites like this, but can't figure it out:

  1. http://www.ibm.com/developerworks/web/library/wa-memleak/
  2. How do JavaScript closures work?

Can someone explain me if this is the correct approach to avoid memor leaks? Or is there a better solution?

Upvotes: 1

Views: 108

Answers (1)

mattbasta
mattbasta

Reputation: 13709

There's nothing in your code that would indicate to me that you'll have memory leak issues. More concerningly, however, is that the style of code that you're using to avoid memory leaks is making it very difficult to tell whether there will be memory problems going forward. You've posted a few dozen lines of code; a codebase with a few thousand lines of code written in that style might be impossible to properly audit for memory leaks.

Some memory management techniques that you could use:

  • If an object no longer needs to be used, dereference it. The garbage collector will clean the object up for you.
  • If you dynamically call addEventListener, always call removeEventListener unless the DOM node that you're binding events to gets destroyed later.
  • If you reference an object from within a function, then reference the function somewhere, you still have a reference to the object. Avoid keeping references to things that you no longer need.

Following those three guidelines will get you most of your way through a career dealing with JavaScript without any memory-related issues :)

Upvotes: 1

Related Questions