Analyzing javascript performance

Question

I have a web application that has a lot of JavaScript code. As the content gets larger, some of the features start to get slower.

I can't seem to find out what is exactly taking too much time and freezes the browser for a second or two.

Currently, I am putting Date variables at different locations and subtracting them to see the parts that take too much time, but It is not helping me a lot.

I am aware of Chrome's Developer toolbar and firebug, but I don't know exactly how to use them to see processing time of codes and such...

Please help me to optimize my app and figure out where it chokes.

Answer 1

For chrome dev toolbar press f12

• go to network tab to see dl times.
• And sources tab to debug code.
• And profiles tab to record cpu usage

Or google for tutorials and just try it out.

Answer 2

You can use console.time()

For instance:

console.time('yourFunction');

//Time what you'd like inbetween the statements
yourFunction();

console.timeEnd('yourFunction');

Alternatively (although you mentioned you've already used these), you can try the following native functions:
date()
getTime()
getMilliseconds()