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)

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).

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.