jQuery selector performance : a curious case

Question

I tested the differences between 2 ID selectors, the first is normal : $('#lol') And the second is the same but placed between multiple parenthesis : $((((('#lol')))))

I launched a test on jsperf, with firefox and chrome. Results are interesting : With firefox, the first (normal selector) is 40% slower (!!!). With chrome, the second is 0.84% slower.

Why such a difference ? Can someone explain this ?

Is jsperf.com reliable ?

You can see the test here :

http://jsperf.com/ghshshsrd

I will test on others browsers, for fun.

(Edit: i'm on Mac OS X, by the way)

Wehner

Also tested with opera and safari, no real differences. Only firefox has this strange result – Wehner

not if you run the test from Firefox browswer, for me both are similar – Nathan

I think the projected result shown in the graph is the culprit – Nathan

I tested again and again, and the second is still better, but there is less differences (8% fastest). I don't know if the problem is my firefox or jsperf. – Wehner

Why would you call .html() if you want to test $()? The .html() call will completely eclipse any differences, if there was any. – Hillegass

Try disabling Java Applet plugin in Firefox, the results will be similar. – Teucer

@undefined : Java was already disabled. If i activate it, the difference is bigger :D – Wehner

@esailja : I first tested selectors only, the results were also strange, so i added .html() to see and nothing changed... – Wehner

With FireFox 15, there is no consistent or significant difference. – Flowerless

Answer 1

As others have pointed out, the differences between the results obtained for the two statements is negligible. Even when testing the same statement twice, it is very unlikely you will yield two identical Ops/sec values.

Also noticed you said "a test", not "multiple tests". If the result seemed odd, just repeat the test - don't forget anomalous results could occur if your browser was starved of resource part way through a test run.

JSPerf has always been reliable for me - enough to be useful for demonstrating optimization techniques (this being a classic example).

Overtax

Answer 2

Actually there is no real difference between both ways to select an element (except for readability). I created a new jsperf test case which more objectively measures the case:

-> http://jsperf.com/jquery-selector-performance-20130730

Why your test-result is so strange? It is more likely that your test-scenario is inaccurate than any real performance difference between both tests

You can go and REVERSE the test order of your initial test: first check the code $(((('#lol')))) and after this $('#lol'). I am quite certain that you will get the exact opposite result of your current test ;-)

I am not an expert on this, but for one part, the browsers are very smart today and will cache javascript code/variables. Also jQuery possibly will store the value after the first call.

Spoony