如何跟踪慢JS或JQuery代码

Question

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.

Answer 1

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.

Answer 2

我使用过的最好的工具是https://developers.google.com/web-toolkit/speedtracer/ for Chrome

Answer 3

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.

Answer 4

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.

Answer 5

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.