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.

Open the site in Chrome, hit F12, click "Profiles"
–
MrOBrianOct 10 '12 at 18:26

Sounds like a memory leak ? Unless these 800 images are all 1 mb+ in size?
–
Cory DanielsonOct 10 '12 at 18:26

Cory - The images are between 8-50KB Obrian - will do
–
Joel Joel BinksOct 10 '12 at 18:28

How are these images positioned? Are they all absolutely dumped onto the screen and constantly updated as you scroll? Nothing you've explained seems to be the smoking gun here... Just a bunch of images dumped into the DOM and you're scrolling around on this page?
–
Cory DanielsonOct 10 '12 at 19:16

What kind of selectors are you using in your jQuery? They could possibly need optimization. Are there any events/delegates being set up as well? Hard to imagine where the issue is without seeing code. Hopefully some of these questions get you thinkin, though
–
Cory DanielsonOct 10 '12 at 19:19

Are you familiar with the console.log("Function A is called."); command? You can put flags throughout your code to help you find what's causing your program to run slowly which can then be viewed in the Javascript console.

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.

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.

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.