CODEWITHSUNDEEP
javascriptjqueryperformanceimagefirebug
Joel Joel Binks
Joel Joel Binks

Reputation: 1666

How to trace slow JS or JQuery code

I created a web page for viewing images. This page has some other code that gets included that I did not write. The page loads 40 small images upon load. Then the user will scroll down and additional pages of 40 images can be loaded via ajax. Once I get to 15-20 pages, I notice the page begins to slow significantly. I check app counters and it can go up to 100% cpu and memory can go over 3GB. Then I will inevitably get the modal that JQuery is taking too long to execute, asking me if I want to stop executing the script. Now I realize that a page with up to 800 images is a big load, but the issue with JQuery suggests to me that some code may also be iterating over this larger and larger group of dom objects. It almost appears to get exponentially slower as I pass 15 pages or so. Once I get to 20 pages it becomes almost unusable.

First of all, is it even possible to run a page efficiently, even with minimal JS, when you have this many images? Secondly, is there a recommended way to "trace" JS and see what kinds of functions are getting executed to help determine what is the most likely culprit? This is most important to me - is there a good way to do in Firebug?

Thanks :)

EDIT - I found my answer. I had some older code which was being used to replace images that failed to load with a generic image. This code was using Jquery's .each operator and thus was iterating over the entire page and each new ajax addition every time the page loaded. I am going to set a class for the images that need to be checked in CSS so that the ajax-loaded images are unaffected.

Upvotes: 4

Views: 2274

Answers (5)

Joel Joel Binks
Joel Joel Binks

Reputation: 1666

I was able to fix the problem by going over my code again. I was loading new images via ajax but I had an older line of code that was checking all images, ie $('img') to replace any images that failed to load with a generic image. This means that as I continually load new images, this selector has to iterate over the entire growing dom again and again. I altered that code and now the page is flying! Thanks everyone for the help.

Upvotes: 0

RestingRobot
RestingRobot

Reputation: 2978

I prefer to use the timer function in Firebug or Chrome, it can be called like this:

   console.time('someFunction timer');

   function someFunction(){ ... }

   console.timeEnd('someFunction timer');

This isn't as robust as the profiler functions, but it should give you an idea of how long functions are taking.

Also if you are running at 100% CPU and 3GB of memory, you almost certainly have a memory leak. You may want to consider removing some the initial images, when more pages are loaded in. For example, after 5 pages being shown, you remove the first page when the user views the 6th page.

Upvotes: 0

Kirk
Kirk

Reputation: 513

To answer your first question, 15 pages of images should not be a problem for a computer to handle. Google loads up to 46 pages of images without lagging at all. Although it does stop you from loading more after that.

The answer your second question, there are many ways to track JS code. Since you are doing a performance related debugged, I'd go with timestamped console log:

console.log(" message " + new Date());

I'd put one in the beginning and end of function you are interested in measuring the performance of, and read through the log to see how long it takes to execute each of those functions. You would compare the timestamp to see what excess code is executing and how long it took for the code to execute.

Finally, in Firebug, go to the console tab, and click on Pofile before you start you start scrolling down the page. Then scroll to your 15th page, and then click Profile again. It breaks down function called and amount of time it took.

Upvotes: 0

nanobar
nanobar

Reputation: 66355

The best tool I have used is https://developers.google.com/web-toolkit/speedtracer/ for Chrome

Upvotes: 0

QueueHammer
QueueHammer

Reputation: 10824

Firebug, and all the other debugging tools let you profile your functions. You can see how long they take to run and how many times they have been called.

http://getfirebug.com/javascript

See: Profile JavaScript performance

Another useful tool to look into is the profile() function

console.log('Starting Profile');
console.profile();
SuspectFunction();
console.profileEnd();

Though the console window in the debugger you can see the profile results.

Upvotes: 1

Related Questions