Tag Archives: javascript

JQuery Performance Tests – Bazaar

JQuery is currently the most popular JavaScript library on the world. Therefore apparently everybody seems to be an expert on it.

I just spend some time reading articles from ‘experts’ and what they advise you to do.

NB! All tests which follow are executed on the 3 browsers: Chrome 35, IE 11 and Firefox 30-32.

1. $(“#id”).find(“p”); JQuery performance is 2 times faster than $(“#id p”); .

After running tests on those 2 I can conclude only that he must be one passionate  IE user :)

For the 2 other browsers the process time for the both functions is nearly the same.

For those who want to try the test on their own: http://jsperf.com/jquery-performance-test-2

 

2. Learn the entire library.

The example that was given in this article to support this theory was the following.

You shouldn’t use that:

a.hasClass('b') ? a.removeClass('b') : a.addClass('b');

You should use that:

a.toggleClass('b');

I agree that the second one is obviously shorter but that is pretty much all advantages to it.

Let’s prove it though instead of leaving empty statements in the air.

I run the both pieces of code in 3 browsers and here is the results.

The JQuery performance for all browsers is better with the manual and add/remove of class functionality than the toggle one.

Here is the actual test so you can try it on your own: http://jsperf.com/jquery-toggle-class-test

3. $(“#id p”);  performs faster than $(“p”);

The only browser on which that is true is Chrome. And in IE actually $(“p”); performs much better.

Here is the test http://jsperf.com/jquery-single-vs-nested-description

4. Id vs Class selectors vs HTMLselectors

This one is really old advice from the time when JavaScript was still not popular and the experts on it weren’t that many.

Since JQuery is built on JavaScript we would only expect that the  JQuery performance for IDs should be also the fastest.

In this test we have clearly faster ID search for all the browsers.

On second place is the class selector and the last place remains for the HTML selectors.

JQuery Multiselect – Abbreviation List

Recently I had a struggle with jQuery Multiselect Widget.

As general it is really flexible and easy to use, but I was willing to have a list with abbreviation of all selected values (separate with commas)

More or less it should look like that at the end:

Continue reading JQuery Multiselect – Abbreviation List