CODEWITHSUNDEEP
javascriptjquerymemory-leaks
Linas
Linas

Reputation: 4408

Dynamically loading Javascript and maintaining objects

I am building an ajax based website, where almost every page has it's own Javascript file which is being loaded along with html.

I have couple questions if I'm doing things in a right way, so let's get started :)

First of all, the way I execute the loaded script. All of my code is encapsulated in a function, so say I have loaded the register page, what i would do is:

page_class = "register"; //this will change when new page is loaded
new window[page_class];

So this works the way I want it to work, but I'm concerned about one thing, when the user comes back from the other page to register one more time and new object are going to be created one more time will it create memory leaks or some other bad things? If so what can I do to rerun my whole script?

My next question is fairly simple, I attach my jquery events using on and when I switch the page I loop through all elements that will be removed and detach every element, is that enough to prevent memory leaks? If not what could i improve?

Upvotes: 0

Views: 259

Answers (1)

Kai Qing
Kai Qing

Reputation: 18833

So considering what we've figured out from the comments, here's my 2 cents:

I would suggest making your site sectionally ajaxed. By that I mean all music areas as one subsection, videos in another, etc. So within each section you ajax around and when transitioning to another section you gracefully fade and naturally page load the next.

.detach() in my opinion is not enough to ensure proper memory handling since detach keeps the removed section referenced. Good for when you want to recall it but useless if the user just clicked an area and backed out never to return. Now you have this reference to an entire section stored in memory.

How to handle memory in each section? You can maintain section objects. An example:

var music = {
    loaded: 0,
    current_track: null,
    init: function(){
        if(this.loaded == 0)
        {
            $.ajax... get your music section html and write it to the #music element
            this.loaded = 1;
        }
    },
    selectTrack: function(id)
    {
        // just an example
    }
};

while maintaining a constant site object:

var site = {
    init: function(){
        // call selected page, etc
    },
    move: function(page){
        if(page == 'music')
        {
            music.init();
            $('#content').animate(...);
        }
    }
};

$(document).ready(function(){
    site.init();
});

Where the site obj is initted on page load and when the move function is called it calls the init method for the respective object, which does nothing if the page has already been loaded. This example obviously depends on there being a #music element as well as a container element called #content. This part could be totally irrelevant depending on how you handle transitions. All your call, but the general idea is the same. You can always set display to none to avoid rendering bottlenecks for complex markup.

You mentioned, at least briefly, that the project was expected to pretty big. Not to be too pessimistic, but "big" is defined after the fact and not in the plan. Unless you have millions of dollars to throw at this. I'm not trying to dissuade you. By all means, make your site as you expect it to be. But consider that scaling up when demand calls is a much more sane approach than going full throttle fancy before anyone knows about it. I only say this because I've worked for clients who have thrown millions into the gig claiming it will be the next youtube and 6 months later they were gone. Where they focused on stability and security, they failed in design and marketing. That - and pretty much that alone - is why I suggest making only sections ajaxed. It keeps it compartmentalized, the focus is easy to keep track of and you only have that one piece to worry about. When you get 10,000 users, consider going full ajax. When you get there you may also know why it might be a better move to consider ipads and tablets over a fancy ajax site. Your cool transitions and fades will be a wounded dog on mobile devices. Considering the direction things are going, is that what you want?

Again, this is only my opinion. I don't know your site or skill set or even whether or not you have already considered all I mentioned. If you have any specific questions I can try to answer or update this post. Good luck.

Regarding the js options mentioned:

Standard jquery will likely suffice, unless you have time to fully understand something like bootstrap

Node.js is awesome but you need to make sure your server can deploy it. Dreamhost, for example, does not support it. At least they didn't last I checked. They're a good example of a decent, common host. Same for Media Temple, I think. Please correct me if I'm wrong.

Upvotes: 1

Related Questions