7

I've recently came across a slow responding script bug on an application and I felt the need to profile the application to identify that what I need to improve on. I want a long-term fix, not a hackish fix. I tried the Firebug Profiler but since the application uses a lot of jQuery I get a lot of reports about anonymous calls which I actually expected.

I've also found some reports on the web about an profiler created by John Resig but the links I found were all dead.

So my questions are:

  1. What are the best ways to profile a jQuery application?
  2. Are there any opensource dedicated tools/scripts to achieve this?
Dan D.
  • 73,243
  • 15
  • 104
  • 123
Bogdan Emil Mariesan
  • 5,529
  • 2
  • 33
  • 57

3 Answers3

2

So after digging up a bit more i've found another solution given by John Resig. He was using a unit testing extension for firebug called FireUnit(http://fireunit.org/) which proves to be quite nice.

If you take a look at the examples given at:

http://ejohn.org/blog/function-call-profiling/

And also check the test page he is providing:

http://ejohn.org/files/jquery-profile.html

What you get are some nice results such as bellow:

.addClass("test"); 52
.addClass("test"); 102
.removeClass("test"); 102
.removeClass("test"); 52
.css("color", "red"); 299 O(3n)
.css({color: "red", border: "1px solid red"}); 597 O(6n)
.remove(); 198 O(2n)
.append("test"); 599 O(6n)
.show(); 982 O(10n)
.hide(); 968 O(10n)
.html("test"); 104
.empty(); 100
.is("div"); 109
.filter("div"); 214 O(2n)
.find("div"); 300 O(3n)

I've managed to integrate this within several applications and the results have been more than satisfactory. The only drawback is that you can only use the plugin from within Firefox. But still this is quite a nice tool.

Bogdan Emil Mariesan
  • 5,529
  • 2
  • 33
  • 57
0

As stated here :

IE, Chrome and Safari have built in profilers in the web development tools that ship with the browser. For Firefox you may use Firebug. Also useful may be, since you're using jQuery which means your profiling report will be filled with anonymous functions and alike, making it quite unreadable, John Resig's jQuery profiling plugin, which will give you a clearer output on the matter.

Community
  • 1
  • 1
adrien
  • 4,399
  • 26
  • 26
  • As stated in my post above i've already checked John Resig`s profiler on that link. But all i get is a 404 page not found for the download location :) – Bogdan Emil Mariesan May 02 '12 at 08:42
  • since no answer has been given by this time i will accept yours as the correct one, although i might return with a bounty for this soon – Bogdan Emil Mariesan Jun 20 '12 at 11:38
  • I found a copy of John Resig's original jquery-profile.js plugin here: https://gist.github.com/1546548 but it seems unfortunately broken for jQuery +1.8 – Mahn Dec 28 '12 at 23:47
0

I created a tool that does quite exactly what you need : http://yellowlab.tools

Launch a test, click on the "JS Timeline" tab and it logs every jQuery functions that access the DOM during the loading of the page. It also tracks vanilla JS functions, so you can understand the magic behind jQuery.

Very useful to help optimize some jQuery code for performance.

Hope my answer doesn't come too late :)

Gaël Métais
  • 804
  • 7
  • 7