Any better ways to optimize javascript?

Question

I am doing a web project which has several javascript files, finding the front-end response a bit slowly especially on firefox. The factor related to server side has been ruled out, so I conclude that it must has something to do with my javascripts.
I currently use firebug to debug, using console.log(), or by commenting some codes here and there.
But it turns out to be very time-consuming! Does anyone has other efficient or better ways to help me? Thanks in advance.

********Below is part of the codes which take up most of the time, @Bill. Firebug reported an Undefined error to "mainTabs". But when I tried to redeclare mainTabs in load callback, it remained the same.******

var mainTabs = $("#main-tabs").tabs({
    selected: defaultTab,
    cache: true, //set tabs to cache the content
    load: function(event, ui){
            //want to preload the non-active tabs' content
            console.log("mainTbas: "+mainTabs.html());
            mainTabs.tabs("load", ui.index+1);
    }
});

How about providing some code examples/specifics?

meder omuraliev
– meder omuraliev

2012-07-19 04:52:29 +00:00
Commented Jul 19, 2012 at 4:52 — meder omuraliev
– meder omuraliev, Commented Jul 19, 2012 at 4:52

Community · Accepted Answer · 2017-05-23 11:56:22Z

2

Firebug has a script profiler you can use to find out where the problem might be. It's under the Console tab, right before the All button. Click the Profile button and then refresh your page (or do whatever is running slowly on your page). Click the Profile button again to get a table that will tell you what functions are taking the most time. Start there to try and optimize.

For you sample code, you need to declare mainTabs first. This should work (at least according to Preload JQuery UI tabs in the background which is what I assume you started with):

var mainTabs;  // declare mainTabs first.
mainTabs = $("#main-tabs").tabs({
                selected: defaultTab,
                cache: true, //set tabs to cache the content
                load: function(event, ui){
                    mainTabs.tabs("load", ui.index+1);
                }
            });

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 19, 2012 at 4:53

Bill

25.6k8 gold badges100 silver badges129 bronze badges

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

3 Comments

shengfengli Over a year ago

Thanks, Bill. I tried, but all the functions called in the result table are from jquery.js. And the funcs are all anonymous. It does me a little help, coz I can't still decide where the problem lie.

Bill Over a year ago

Sort by inclusive time and find what code of yours is calling all of the jQuery. Something isn't right if that much time is being spent in jQuery. Do you have lots of animations or other things that use timers? It almost seems like you are creating timers in a loop or something.

shengfengli Over a year ago

I have updated the question, you can take a look at it again.thx.

Collectives™ on Stack Overflow

Any better ways to optimize javascript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related