Question

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?

Answer 1

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.