如何分析JavaScript函数执行顺序

Question

I have to optimize a website that uses a lot of JavaScript. I'm not the author of that site. I just need to understand the way it works and optimize few things related to JavaScript. And for that I need to understand what JS code is executed specifically during page load.

I'm looking for a way to display a JavaScript functions execution order. The site I'm dealing with uses about 40 external scripts and probably 20-40 inline JS that is stuffed here and there. The best would be Firefox add-on.

I know I can add console.log("script name"); into each of the JS files but with that amount of code it's ridiculously unpractical. I know that Firebug ships with the profiler, but it does not allow me to see when a function was executed. Besides it crashes on the site I'm trying to analyze.

I just want to know the order of function execution. The site heavily relays on jQuery. Almost all of these scripts are jQuery.

Answer 1

As in my earlier comment, try using Chrome. Some useful links here to help you use the developer tools to profile JS:-

https://developers.google.com/chrome-developer-tools/docs/cpu-profiling http://coding.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/ https://developers.google.com/chrome-developer-tools/docs/timeline

Great post by Addy Osmani on timeline profiles:-

https://developers.google.com/chrome-developer-tools/docs/timeline

Hope these are of use to you.

Mat