Testing and comparing performance of jQuery plugins

Question

There are a tonne of jQuery plugins out there and so I want to ensure that when I find two or more plugins that do the same thing, I choose the best.

I generally go for filesize as a first indicator of peformance, but I was wondering else I can do to test and compare performance of these plugins.

Could I use jsperf.com? Throw those plugins I want to compare in there. Would the results be a good indicator as to the performance?

Any other suggestions?

Thanks.

Answer 1

For measuring performance and so on there's a great free tool in circulation: DynaTrace Ajax 3 Edition ( http://ajax.dynatrace.com/ajax/en/ )

In your case you have to look at the JavaScript part http://ajax.dynatrace.com/ajax/en/content/c-javascript-dom-tracing.aspx

Which gives you the ability of measuring performance of specific methods and so on. I've used it in the past to optimize a huge mega drop down menu running in IE7. It helped a lot!

Answer 2

Filesize is not a good indicator of runtime performance. If you know javascript very well, you could look at the code and form an opinion of how well written it is, but I wouldn't expect filesize to be a good measure of runtime performance.

If performance really matters to you, then the only way to make a meaningful decision is to measure the exact operations that you care about. jsPerf is one very useful tool for setting up a performance comparison between two different ways of accomplishing a task. But, you have to be very careful when designing performance tests so that what you are measuring is really the right thing and jsPerf can only measure some types of things.

More specific advice would depend upon the specific plug-in and what types of operations it does that you care the most about.

For reference, jQuery may sometimes be the fastest and most convenient way to write code, but often isn't the fastest executing code for sections of code where speed really matters. For example, document.getElementById("test").value = "foo" is 5-7x faster than $("#test").val("foo") as illustrated here: http://jsperf.com/jquery-vs-plain-javascript.

Answer 3

Generally the best indicator of performance, aside from looking through the code and testing it yourself, is the number of people using it along with the comments and reviews you read about it. File size is of little consequence unless it's extreme.

Just read what others have said, what the documentation says about known issues and make an educated guess.

Answer 4

Sign up for Sauce Labs, which lets you test the most prominent browser/OS combinations, and see how the plugins perform in every browser you care about.

(A free account gives you 45 minutes of testing per month.)